Template:Team:Leeds TouchGalleryjs

From 2013.igem.org

(Difference between revisions)
m
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
/*!
-
<body>
+
* To use this javascript, reference the url with the suffix ?action=raw&ctype=text/javascript
-
<script>
+
* This and other javascript files from http://www.dynamicdrive.com
-
/*
+
*/
-
* Touch Image Gallery (c) Dynamic Drive (www.dynamicdrive.com)
+
-
* Last updated: July 4th, 2013
+
-
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
+
-
* Requires: jQuery 1.7 or higher
+
-
* Requires: jquery.touchSwipe.min.js
+
-
*/
+
-
(function($){
+
(function(e){var t={width:300,height:250,navarea:"45%",curslide:0,threshold:75,navbuttons:["https://static.igem.org/mediawiki/2013/6/6a/Leeds_GalleryLeft.png","https://static.igem.org/mediawiki/2013/7/7f/Leeds_GalleryRight.png",250]};var n={triggerOnTouchEnd:true,triggerOnTouchLeave:true,allowPageScroll:"vertical"};e.fn.touchgallery=function(r){return this.each(function(){function c(e){clearTimeout(i.hidenavtimer);var t=i.curslide;switch(e){case"forth":i.curslide=t<u-1?t+1:0;break;case"back":i.curslide=t>0?t-1:u-1;break;default:i.curslide=parseInt(e)}f.removeClass("selected").eq(i.curslide).addClass("selected");s.css("left",-i.width*i.curslide)}var i=e.extend({},t,r);$slideshow=e(this),swipestart=false,initialx=0,dist=0,swipecount=0;var s=$slideshow.find("ul:eq(0)");var o=s.find("li");var u=o.length;var a=e('<div class="jumptodiv" />').html(function(){var e="";for(var t=0;t<u;t++){e+='<span data-image="'+t+'" style="cursor: pointer">&#9679;</span> '}return e}()).appendTo($slideshow);var f=a.find("span");var l=e('<div style="position:absolute; width: '+i.navarea+"; height: 100%; left: 0; top: 0; text-align: left; line-height:"+i.height+'px; cursor: pointer; opacity: 0" />').clone().addBack().eq(0).data({dir:"back"}).html('<img src="'+i.navbuttons[0]+'" style="vertical-align: middle; position:relative; top:'+i.navbuttons[2]+'px" title="Back one image" />').end().eq(1).data({dir:"forth"}).css({left:"auto",right:0,textAlign:"right"}).html('<img src="'+i.navbuttons[1]+'" style="vertical-align: middle; position:relative; top:'+i.navbuttons[2]+'px" title="Forward one image" />').end().on("selectstart",function(){return false}).appendTo($slideshow);$slideshow.on("mouseenter mouseleave",function(e){var t=e.type=="mouseenter"?1:0;l.animate({opacity:t},200)});$slideshow.add(o).css({width:i.width,height:i.height});s.css({width:i.width*u});c(i.curslide);n.swipeStatus=function(e,t,n,r){if(t=="start"){swipestart=true;swipecount=0;initialx=parseInt(s.css("left"));dist=0}else if(t=="move"&&swipestart){dist=(n=="left"?-1:1)*r+initialx;s.css("left",Math.min(dist,(i.curslide+1)*i.width))}else if(t=="cancel"){s.css("left",-i.width*i.curslide)}else if(t=="end"){if(r<i.threshold){c(i.curslide)}else{swipecount++;if(swipecount==1){c(n=="left"?"forth":"back")}}swipestart=false}};n.tap=function(e,t){l.css({opacity:1});i.hidenavtimer=setTimeout(function(){l.css({opacity:0})},2e3)};$slideshow.swipe(n);l.swipe({tap:function(t){var n=e(this);c(n.data("dir"))}});a.swipe({tap:function(t){if(t.target.tagName=="SPAN"){var n=e(t.target);c(parseInt(n.data("image")))}}})})}})(jQuery)
-
 
+
-
var gallerydefaults = {
+
-
width: 300,
+
-
height: 250,
+
-
navarea: '45%',
+
-
curslide: 0,
+
-
threshold: 75,
+
-
navbuttons : ['http://www.dynamicdrive.com/dynamicindex4/left.png', 'http://www.dynamicdrive.com/dynamicindex4/right.png', 250]
+
-
}
+
-
 
+
-
var swipeOptions={
+
-
triggerOnTouchEnd : true,
+
-
triggerOnTouchLeave : true,
+
-
allowPageScroll:"vertical"
+
-
}
+
-
 
+
-
$.fn.touchgallery = function(options){
+
-
return this.each(function(){
+
-
var setting = $.extend({}, gallerydefaults, options)
+
-
$slideshow = $(this),
+
-
swipestart = false,
+
-
initialx = 0,
+
-
dist = 0,
+
-
swipecount = 0
+
-
var $belt = $slideshow.find('ul:eq(0)')
+
-
var $lis = $belt.find('li')
+
-
var imgcount = $lis.length
+
-
var $jumptodiv = $('<div class="jumptodiv" />')
+
-
.html(function(){
+
-
var bullets =''
+
-
for (var i=0; i<imgcount; i++){
+
-
bullets += '<span data-image="' + i + '" style="cursor: pointer">&#9679;</span> '
+
-
}
+
-
return bullets
+
-
}())
+
-
.appendTo($slideshow)
+
-
var $jumptobuttons = $jumptodiv.find('span')
+
-
var $navbuttons = $('<div style="position:absolute; width: ' + setting.navarea + '; height: 100%; left: 0; top: 0; text-align: left; line-height:' + setting.height + 'px; cursor: pointer; opacity: 0" />')
+
-
.clone()
+
-
.addBack()
+
-
.eq(0)
+
-
.data({'dir': 'back'})
+
-
.html('<img src="' + setting.navbuttons[0] + '" style="vertical-align: middle; position:relative; top:' + setting.navbuttons[2] +'px" title="Back one image" />')
+
-
.end()
+
-
.eq(1)
+
-
.data({'dir': 'forth'})
+
-
.css({left: 'auto', right: 0, textAlign: 'right'}).html('<img src="' + setting.navbuttons[1] + '" style="vertical-align: middle; position:relative; top:' + setting.navbuttons[2] +'px" title="Forward one image" />')
+
-
.end()
+
-
.on('selectstart', function(){
+
-
return false
+
-
})
+
-
.appendTo($slideshow)
+
-
 
+
-
$slideshow.on('mouseenter mouseleave', function(e){
+
-
var opacity = (e.type == 'mouseenter')? 1 : 0
+
-
$navbuttons.animate({opacity: opacity}, 200)
+
-
})
+
-
 
+
-
function navigate(keyword){
+
-
clearTimeout(setting.hidenavtimer)
+
-
var curslide = setting.curslide
+
-
switch (keyword){
+
-
case 'forth':
+
-
setting.curslide = (curslide < imgcount-1)? curslide + 1 : 0
+
-
break
+
-
case 'back':
+
-
setting.curslide = (curslide >0)? curslide - 1 : imgcount-1
+
-
break
+
-
default:
+
-
setting.curslide = parseInt(keyword)
+
-
}
+
-
$jumptobuttons.removeClass('selected').eq(setting.curslide).addClass('selected')
+
-
$belt.css('left', -setting.width * setting.curslide)
+
-
+
-
}
+
-
+
-
$slideshow.add($lis).css({
+
-
width: setting.width,
+
-
height: setting.height
+
-
})
+
-
+
-
$belt.css({width: setting.width * imgcount})
+
-
navigate(setting.curslide)
+
-
+
-
swipeOptions.swipeStatus = function(event, phase, direction, distance){
+
-
if (phase == 'start'){
+
-
swipestart = true
+
-
swipecount = 0
+
-
initialx = parseInt( $belt.css('left') )
+
-
dist = 0
+
-
}
+
-
else if (phase == "move" && swipestart){
+
-
dist = (direction == 'left'? -1 : 1) * distance + initialx
+
-
$belt.css('left', Math.min(dist, (setting.curslide+1) * setting.width) )
+
-
}
+
-
else if (phase == 'cancel'){
+
-
$belt.css('left', -setting.width * setting.curslide)
+
-
}
+
-
else if (phase == 'end'){
+
-
if (distance < setting.threshold){ // snap back
+
-
navigate(setting.curslide)
+
-
}
+
-
else{
+
-
swipecount ++
+
-
if (swipecount == 1){
+
-
navigate( (direction == 'left')? 'forth' : 'back' )
+
-
}
+
-
}
+
-
swipestart = false
+
-
}
+
-
}
+
-
 
+
-
swipeOptions.tap = function(event, obj){
+
-
$navbuttons.css({opacity: 1})
+
-
setting.hidenavtimer = setTimeout(function(){
+
-
$navbuttons.css({opacity: 0})
+
-
}, 2000)
+
-
}
+
-
+
-
$slideshow.swipe(swipeOptions)
+
-
 
+
-
$navbuttons.swipe({
+
-
tap: function(e){
+
-
var $target = $(this)
+
-
navigate( $target.data('dir') )
+
-
}
+
-
})
+
-
$jumptodiv.swipe({
+
-
tap: function(e){
+
-
if (e.target.tagName == 'SPAN'){
+
-
var $target = $(e.target)
+
-
navigate( parseInt($target.data('image')) )
+
-
}
+
-
}
+
-
})
+
-
})
+
-
}
+
-
 
+
-
 
+
-
}) (jQuery)
+
-
 
+
-
 
+
-
</script>
+
-
</body>
+
-
</html>
+

Latest revision as of 10:30, 3 September 2013

/*! 

* To use this javascript, reference the url with the suffix ?action=raw&ctype=text/javascript
* This and other javascript files from http://www.dynamicdrive.com
*/

(function(e){var t={width:300,height:250,navarea:"45%",curslide:0,threshold:75,navbuttons:["Leeds_GalleryLeft.png","Leeds_GalleryRight.png",250]};var n={triggerOnTouchEnd:true,triggerOnTouchLeave:true,allowPageScroll:"vertical"};e.fn.touchgallery=function(r){return this.each(function(){function c(e){clearTimeout(i.hidenavtimer);var t=i.curslide;switch(e){case"forth":i.curslide=t0?t-1:u-1;break;default:i.curslide=parseInt(e)}f.removeClass("selected").eq(i.curslide).addClass("selected");s.css("left",-i.width*i.curslide)}var i=e.extend({},t,r);$slideshow=e(this),swipestart=false,initialx=0,dist=0,swipecount=0;var s=$slideshow.find("ul:eq(0)");var o=s.find("li");var u=o.length;var a=e('<div class="jumptodiv" />').html(function(){var e="";for(var t=0;t<u;t++){e+='● '}return e}()).appendTo($slideshow);var f=a.find("span");var l=e('<div style="position:absolute; width: '+i.navarea+"; height: 100%; left: 0; top: 0; text-align: left; line-height:"+i.height+'px; cursor: pointer; opacity: 0" />').clone().addBack().eq(0).data({dir:"back"}).html('<img src="'+i.navbuttons[0]+'" style="vertical-align: middle; position:relative; top:'+i.navbuttons[2]+'px" title="Back one image" />').end().eq(1).data({dir:"forth"}).css({left:"auto",right:0,textAlign:"right"}).html('<img src="'+i.navbuttons[1]+'" style="vertical-align: middle; position:relative; top:'+i.navbuttons[2]+'px" title="Forward one image" />').end().on("selectstart",function(){return false}).appendTo($slideshow);$slideshow.on("mouseenter mouseleave",function(e){var t=e.type=="mouseenter"?1:0;l.animate({opacity:t},200)});$slideshow.add(o).css({width:i.width,height:i.height});s.css({width:i.width*u});c(i.curslide);n.swipeStatus=function(e,t,n,r){if(t=="start"){swipestart=true;swipecount=0;initialx=parseInt(s.css("left"));dist=0}else if(t=="move"&&swipestart){dist=(n=="left"?-1:1)*r+initialx;s.css("left",Math.min(dist,(i.curslide+1)*i.width))}else if(t=="cancel"){s.css("left",-i.width*i.curslide)}else if(t=="end"){if(r<i.threshold){c(i.curslide)}else{swipecount++;if(swipecount==1){c(n=="left"?"forth":"back")}}swipestart=false}};n.tap=function(e,t){l.css({opacity:1});i.hidenavtimer=setTimeout(function(){l.css({opacity:0})},2e3)};$slideshow.swipe(n);l.swipe({tap:function(t){var n=e(this);c(n.data("dir"))}});a.swipe({tap:function(t){if(t.target.tagName=="SPAN"){var n=e(t.target);c(parseInt(n.data("image")))}}})})}})(jQuery)

Retrieved from "http://2013.igem.org/Template:Team:Leeds_TouchGalleryjs"