Results 1 to 4 of 4

Thread: Touch Image Gallery thumbnails options?

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Question Touch Image Gallery thumbnails options?

    1) Script Title: Touch Image Gallery

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uchgallery.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

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    another question is how can I make it responsive so that the image scales to fit various screen sizes and devices?
    thanks

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,792
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    modify function(in red)

    Code:
    	
    
    
    $.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

    Code:
    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

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

    Code:
    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
           });
    
    	})
    Last edited by vwphillips; 06-02-2014 at 01:15 PM. Reason: adden note that the name must be unique
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. The Following User Says Thank You to vwphillips For This Useful Post:

    mlegg (06-02-2014)

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    thanks Vic, I will try that all later and get back to you

Similar Threads

  1. Touch Image Gallery eratic behaviour
    By Red Fox in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 02-21-2014, 04:03 PM
  2. Need help with Touch Image Gallery
    By djp_12 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-22-2013, 04:40 PM
  3. Featured Image Zoomer | Thumbnails & Options Box
    By JamesArtVille in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-09-2013, 05:17 PM
  4. Touch Image Gallery vs IE
    By Barefoot in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-26-2013, 06:08 PM
  5. Touch Image Gallery
    By Brends in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-11-2013, 05:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •