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 | + | <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 | + | <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 | + | <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 | + | <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); | ||
- | $(' | + | $('<img/>').load(function(){ |
++loaded; | ++loaded; | ||
if(loaded == nmb_thumbs*2) | if(loaded == nmb_thumbs*2) | ||
start(); | start(); | ||
- | }).attr(' | + | }).attr('src',$this.attr('src')); |
- | $(' | + | $('<img/>').load(function(){ |
++loaded; | ++loaded; | ||
if(loaded == nmb_thumbs*2) | if(loaded == nmb_thumbs*2) | ||
start(); | start(); | ||
- | }).attr(' | + | }).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
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/1.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/6.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/2.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/3.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/4.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/5.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/7.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/8.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/9.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/10.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/11.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/12.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/13.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/14.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/15.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/16.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs//17.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/18.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/19.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/20.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/21.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/22.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/23.jpg)
![](http://home.ustc.edu.cn/~yks1987/photos/thumbs/24.jpg)