Team:USTC-Software/gallery

From 2012.igem.org

(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
{{Team:USTC-Software/hidden}}
{{Team:USTC-Software/hidden}}
 +
<html>
<html>
     <head>
     <head>
-
 
+
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 +
        <meta name="description" content="Merging Image Boxes with jQuery" />
 +
        <meta name="keywords" content="jquery, merge, effect, images, photos, animation, background-image"/>
 +
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
      
      
<script src="https://2012.igem.org/Team:USTC-Software/gallery-js1?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2012.igem.org/Team:USTC-Software/gallery-js1?action=raw&ctype=text/javascript" type="text/javascript"></script>
         <style type="text/css">
         <style type="text/css">
-
*{
+
 
-
margin:0;
+
-
padding:0;
+
-
}
+
body{
body{
background:#f0f0f0 url('https://static.igem.org/mediawiki/igem.org/c/c5/Carbon_fibre.png') repeat top left;
background:#f0f0f0 url('https://static.igem.org/mediawiki/igem.org/c/c5/Carbon_fibre.png') repeat top left;
Line 17: Line 18:
color: #555;
color: #555;
}
}
 +
 +
#footer-box {
 +
      display:none;
 +
    }
 +
h1{
h1{
font-size:36px;
font-size:36px;
Line 22: Line 28:
margin-left:36px;
margin-left:36px;
color:#999;
color:#999;
 +
      border-bottom:none;
}
}
Line 121: Line 128:
<div class="description">Click on the thumbs or the large image</div>
<div class="description">Click on the thumbs or the large image</div>
<div id="im_wrapper" class="im_wrapper">
<div id="im_wrapper" class="im_wrapper">
 +
       
 +
       
 +
        <div style="background-position:0px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/1.jpg" alt="" /></div>
 +
<div style="background-position:-125px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/6.jpg" alt="" /></div>
 +
<div style="background-position:-250px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/2.jpg" alt="" /></div>
 +
<div style="background-position:-375px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/3.jpg" alt="" /></div>
 +
<div style="background-position:-500px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/4.jpg" alt="" /></div>
 +
<div style="background-position:-625px 0px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/5.jpg" alt="" /></div>
 +
<div style="background-position:0px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/7.jpg" alt="" /></div>
 +
<div style="background-position:-125px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/8.jpg" alt="" /></div>
 +
<div style="background-position:-250px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/9.jpg" alt="" /></div>
 +
<div style="background-position:-375px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/10.jpg" alt="" /></div>
 +
<div style="background-position:-500px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/11.jpg" alt="" /></div>
 +
<div style="background-position:-625px -125px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/12.jpg" alt="" /></div>
-
<div style="background-position:0px 0px;">[[File:Small1.jpg]]</div>
+
<div style="background-position:0px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/13.jpg" alt="" /></div>
-
<div style="background-position:-125px 0px;">[[File:Small1.jpg]]</div>
+
<div style="background-position:-125px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/14.jpg" alt="" /></div>
-
<div style="background-position:-250px 0px;">[[File:Small1.jpg]]</div>
+
<div style="background-position:-250px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/15.jpg" alt="" /></div>
-
<div style="background-position:-375px 0px;">[[File:Small1.jpg]]</div>
+
<div style="background-position:-375px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/16.jpg" alt="" /></div>
-
+
<div style="background-position:-500px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs//17.jpg" alt="" /></div>
 +
<div style="background-position:-625px -250px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/18.jpg" alt="" /></div>
 +
<div style="background-position:0px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/19.jpg" alt="" /></div>
 +
<div style="background-position:-125px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/20.jpg" alt="" /></div>
 +
<div style="background-position:-250px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/21.jpg" alt="" /></div>
 +
<div style="background-position:-375px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/22.jpg" alt="" /></div>
 +
<div style="background-position:-500px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/23.jpg" alt="" /></div>
 +
<div style="background-position:-625px -375px;"><img src="http://home.ustc.edu.cn/~yks1987/photos/thumbs/24.jpg" alt="" /></div>
 +
             
 +
           
 +
           
</div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_loading" class="im_loading"></div>
Line 201: Line 232:
 +
//preload all the images
//preload all the images
$im_loading.show();
$im_loading.show();
Line 206: Line 238:
$thumb_imgs.each(function(){
$thumb_imgs.each(function(){
var $this = $(this);
var $this = $(this);
-
$('[[]]').load(function(){
+
$('<img/>').load(function(){
++loaded;
++loaded;
if(loaded == nmb_thumbs*2)
if(loaded == nmb_thumbs*2)
start();
start();
-
}).attr('[[]]',$this.attr('[[]]'));
+
}).attr('src',$this.attr('src'));
-
$('[[]]').load(function(){
+
$('<img/>').load(function(){
++loaded;
++loaded;
if(loaded == nmb_thumbs*2)
if(loaded == nmb_thumbs*2)
start();
start();
-
}).attr('[[]]',$this.attr('[[]]').replace('/File:Small','/File:Big')); //change the imag src here important!!!!!!!
+
}).attr('src',$this.attr('src').replace('/thumbs','')); //change the imag src here important!!!!!!!
});
});
 +
-
 
-
 
-
 
//starts the animation
//starts the animation
function start(){
function start(){
Line 297: Line 327:
mode = 'single';
mode = 'single';
//the source of the full image
//the source of the full image
-
var image_src = $this.find('img').attr('src').replace('/thumbs','');
+
var image_src = $this.find('img').attr('src').replace('/thumbs','');//change the photos src
$thumbs.each(function(i){
$thumbs.each(function(i){
Line 374: Line 404:
var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($next_thumb.length>0){
if($next_thumb.length>0){
-
var image_src = $next_thumb.find('img').attr('src').replace('/thumbs','');
+
var image_src = $next_thumb.find('img').attr('src').replace('/thumbs',''); ///!!!!!important
var arr = Array.shuffle(positionsArray.slice(0));
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
$thumbs.each(function(i){
Line 403: Line 433:
var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($prev_thumb.length>0){
if($prev_thumb.length>0){
-
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs','');
+
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs',''); //////!!!!!!important
var arr = Array.shuffle(positionsArray.slice(0));
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
$thumbs.each(function(i){

Latest revision as of 03:09, 17 August 2012

Gallery Wall

Click on the thumbs or the large image

Retrieved from "http://2012.igem.org/Team:USTC-Software/gallery"