PDA

View Full Version : Touch Image Gallery thumbnails options?



mlegg
06-01-2014, 08:26 PM
1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/touchgallery.htm

3) Describe problem: this isn't so much of a problem really just a question

Is it possible to add thumnails under the images, wether it be dots that when you hover show the image or actual small thumb nails?
I want to make it sort of similar to http://wowslider.com/ but with the touch swiper feature in your Touch Image Gallery.
thanks

mlegg
06-01-2014, 10:27 PM
another question is how can I make it responsive so that the image scales to fit various screen sizes and devices?
thanks

vwphillips
06-02-2014, 10:10 AM
modify function(in red)





$.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)')
$belt.moveit = function(val){
//if (transform)
//this.css('transform', 'translateX(' + val + 'px)')
//else
this.css('left', val)
this.data('curleft', val)
}
var $lis = $belt.find('li')
var imgcount = $lis.length
options.name=options.name||'';
options.name+='bullets';
var $jumptodiv = $('<div id="'+options.name+'" class="jumptodiv" />')
.html(function(){
var bullets =''
for (var i=0; i<imgcount; i++){
bullets += '<span data-image="' + i + '" style="cursor: pointer">●</span> '
}
return bullets
}())
.appendTo($slideshow)



additional script



var zxcPopUp={

init:function(o){
var p=document.getElementById(o.id),bp=document.getElementById(o.name+'bullets'),pi=p?p.getElementsByTagName('IMG'):[],s=bp?bp.getElementsByTagName('SPAN'):[],i=document.createElement('IMG'),z0=0;
if (pi[0]&&s[0]){
i.style.position='absolute';
i.style.left=i.style.top='-3000px';
for (var z0=0;z0<s.length;z0++){
if (pi[z0]&&s[z0]){
i=i.cloneNode(false);
i.src=pi[z0].src;
i.className=o.name;
document.body.appendChild(i);
this.addevt(s[z0],'mouseover','popup',i,s[z0]);
this.addevt(s[z0],'mouseout','popup',i);
}
}
}
},

popup:function(i,s){
var p=s?this.pos(s):[-3000,-3000];
i.style.left=p[0]+'px';
i.style.top=p[1]+'px';
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}


};



additional css



.popup {
width:100px;height:75px;margin-Left:-45px;margin-Top:30px;
}



to initialise


jQuery(function(){ // on DOM load
$('div#touchgallery1').touchgallery({ // initialize first demo
name:'popup', // a unique name
width: 250,
height: 200
})

zxcPopUp.init({
id:'touchgallery1',
name:'popup' // the unique name
});

})

mlegg
06-02-2014, 05:22 PM
thanks Vic, I will try that all later and get back to you