Team:USTC-Software/gallery

From 2012.igem.org

(Difference between revisions)
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>
Line 121: Line 125:
<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.png]]</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:Small2.png]]</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:Small3.png]]</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.png]]</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 229:
 +
//preload all the images
//preload all the images
$im_loading.show();
$im_loading.show();
Line 206: Line 235:
$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 324:
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 401:
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 430:
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){

Revision as of 03:05, 17 August 2012

Gallery Wall

Click on the thumbs or the large image

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