jquery and thumbtray

[lukissimo81]

one last question. which is the normal size of the images corrected fullscreeen?

[justsomeguy]

I'm not sure what you're asking.

[lukissimo81]

I solved the size of images. solved the problem of thumb?

[lukissimo81]

What size do I need images to have them in full screen?

[justsomeguy]

If it stretches them to full screen then they can be any size. Screen sizes change. My laptop here has a native resolution of 1600x900, and it has an external monitor at 1680x1050. My monitors at home run at 1920x1200. My phone is 1920x1080. There's no single screen size. Pictures look better if they are scaled down instead of scaled up, so the larger you save the original images, the better they will look on all screens but the longer it will take to download them also.

[lukissimo81]

For the code of thumtray have news??

[lukissimo81]

in the script there is the function resize automatic for full screen?

[lukissimo81]

automatic resize is resolved, in the code there is an option. the problem is only the thumbtray. i hope in your help!! thanks

[lukissimo81]

this code is good?

/*	Supersized - Fullscreen Slideshow jQuery Plugin	Version : 3.2.7	Theme 	: Shutter 1.1		Site	: www.buildinternet.com/project/supersized	Author	: Sam Dunn	Company : One Mighty Roar (www.onemightyroar.com)	License : MIT License / GPL License*/(function($){		theme = {	 		 		 	/* Initial Placement		----------------------------*/	 	_init : function(){	 			 		// Center Slide Links	 		if (api.options.slide_links) $(vars.slide_list).css('margin-left', -$(vars.slide_list).width()/2);	 					// Start progressbar if autoplay enabled    		if (api.options.autoplay){    			if (api.options.progress_bar) theme.progressBar();			}else{				if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "play.png");	// If pause play button is image, swap src				if (api.options.progress_bar) $(vars.progress_bar).stop().css({left : -$(window).width()});	//  Place progress bar			}									/* Thumbnail Tray			----------------------------*/			// Hide tray off screen			$(vars.thumb_tray).css({bottom : -$(vars.thumb_tray).height()});						// Thumbnail Tray Toggle			$(vars.tray_button).toggle(function(){				$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );				if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");				return false;			}, function() {				$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );				if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");				return false;			});						// Make thumb tray proper size			$(vars.thumb_list).width($('> li', vars.thumb_list).length * $('> li', vars.thumb_list).outerWidth(true));	//Adjust to true width of thumb markers						// Display total slides			if ($(vars.slide_total).length){				$(vars.slide_total).html(api.options.slides.length);			}									/* Thumbnail Tray Navigation			----------------------------*/				if (api.options.thumb_links){				//Hide thumb arrows if not needed				if ($(vars.thumb_list).width() <= $(vars.thumb_tray).width()){					$(vars.thumb_back +','+vars.thumb_forward).fadeOut(0);				}								// Thumb Intervals        		vars.thumb_interval = Math.floor($(vars.thumb_tray).width() / $('> li', vars.thumb_list).outerWidth(true)) * $('> li', vars.thumb_list).outerWidth(true);        		vars.thumb_page = 0;        		        		// Cycle thumbs forward        		$(vars.thumb_forward).click(function(){        			if (vars.thumb_page - vars.thumb_interval <= -$(vars.thumb_list).width()){        				vars.thumb_page = 0;        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});        			}else{        				vars.thumb_page = vars.thumb_page - vars.thumb_interval;        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});        			}        		});        		        		// Cycle thumbs backwards        		$(vars.thumb_back).click(function(){        			if (vars.thumb_page + vars.thumb_interval > 0){        				vars.thumb_page = Math.floor($(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval;        				if ($(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval;        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});					}else{        				vars.thumb_page = vars.thumb_page + vars.thumb_interval;        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});        			}        		});							}									/* Navigation Items			----------------------------*/		    $(vars.next_slide).click(function() {		    	api.nextSlide();		    });		    		    $(vars.prev_slide).click(function() {		    	api.prevSlide();		    });		    		    	// Full Opacity on Hover		    	if(jQuery.support.opacity){			    	$(vars.prev_slide +','+vars.next_slide).mouseover(function() {					   $(this).stop().animate({opacity:1},100);					}).mouseout(function(){					   $(this).stop().animate({opacity:0.6},100);					});				}						if (api.options.thumbnail_navigation){				// Next thumbnail clicked				$(vars.next_thumb).click(function() {			    	api.nextSlide();			    });			    // Previous thumbnail clicked			    $(vars.prev_thumb).click(function() {			    	api.prevSlide();			    });			}					    $(vars.play_button).click(function() {				api.playToggle();						    		    });									/* Thumbnail Mouse Scrub			----------------------------*/    		if (api.options.mouse_scrub){				$(vars.thumb_tray).mousemove(function(e) {					var containerWidth = $(vars.thumb_tray).width(),						listWidth = $(vars.thumb_list).width();					if (listWidth > containerWidth){						var mousePos = 1,							diff = e.pageX - mousePos;						if (diff > 10 || diff < -10) { 						    mousePos = e.pageX; 						    newX = (containerWidth - listWidth) * (e.pageX/containerWidth);						    diff = parseInt(Math.abs(parseInt($(vars.thumb_list).css('left'))-newX )).toFixed(0);						    $(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*3, easing:'easeOutExpo'});						}					}				});			}									/* Window Resize			----------------------------*/			$(window).resize(function(){								// Delay progress bar on resize				if (api.options.progress_bar && !vars.in_animation){					if (vars.slideshow_interval) clearInterval(vars.slideshow_interval);					if (api.options.slides.length - 1 > 0) clearInterval(vars.slideshow_interval);										$(vars.progress_bar).stop().css({left : -$(window).width()});										if (!vars.progressDelay && api.options.slideshow){						// Delay slideshow from resuming so Chrome can refocus images						vars.progressDelay = setTimeout(function() {								if (!vars.is_paused){									theme.progressBar();									vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval);								}								vars.progressDelay = false;						}, 1000);					}				}								// Thumb Links				if (api.options.thumb_links && vars.thumb_tray.length){					// Update Thumb Interval & Page					vars.thumb_page = 0;						vars.thumb_interval = Math.floor($(vars.thumb_tray).width() / $('> li', vars.thumb_list).outerWidth(true)) * $('> li', vars.thumb_list).outerWidth(true);										// Adjust thumbnail markers					if ($(vars.thumb_list).width() > $(vars.thumb_tray).width()){						$(vars.thumb_back +','+vars.thumb_forward).fadeIn('fast');						$(vars.thumb_list).stop().animate({'left':0}, 200);					}else{						$(vars.thumb_back +','+vars.thumb_forward).fadeOut('fast');					}									}			});													 	},	 		 		 	/* Go To Slide		----------------------------*/	 	goTo : function(){	 		if (api.options.progress_bar && !vars.is_paused){				$(vars.progress_bar).stop().css({left : -$(window).width()});				theme.progressBar();			}		},	 		 	/* Play & Pause Toggle		----------------------------*/	 	playToggle : function(state){	 			 		if (state =='play'){	 			// If image, swap to pause	 			if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "pause.png");				if (api.options.progress_bar && !vars.is_paused) theme.progressBar();	 		}else if (state == 'pause'){	 			// If image, swap to play	 			if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "play.png");        		if (api.options.progress_bar && vars.is_paused)$(vars.progress_bar).stop().css({left : -$(window).width()});	 		}	 			 	},	 		 		 	/* Before Slide Transition		----------------------------*/	 	beforeAnimation : function(direction){		    if (api.options.progress_bar && !vars.is_paused) $(vars.progress_bar).stop().css({left : -$(window).width()});		  			  	/* Update Fields		  	----------------------------*/		  	// Update slide caption		   	if ($(vars.slide_caption).length){		   		(api.getField('title')) ? $(vars.slide_caption).html(api.getField('title')) : $(vars.slide_caption).html('');		   	}		    // Update slide number			if (vars.slide_current.length){			    $(vars.slide_current).html(vars.current_slide + 1);			}		    		    		    // Highlight current thumbnail and adjust row position		    if (api.options.thumb_links){		    				$('.current-thumb').removeClass('current-thumb');				$('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb');								// If thumb out of view				if ($(vars.thumb_list).width() > $(vars.thumb_tray).width()){					// If next slide direction					if (direction == 'next'){						if (vars.current_slide == 0){							vars.thumb_page = 0;							$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});						} else if ($('.current-thumb').offset().left - $(vars.thumb_tray).offset().left >= vars.thumb_interval){	        				vars.thumb_page = vars.thumb_page - vars.thumb_interval;	        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});						}					// If previous slide direction					}else if(direction == 'prev'){						if (vars.current_slide == api.options.slides.length - 1){							vars.thumb_page = Math.floor($(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval;							if ($(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval;							$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});						} else if ($('.current-thumb').offset().left - $(vars.thumb_tray).offset().left < 0){							if (vars.thumb_page + vars.thumb_interval > 0) return false;	        				vars.thumb_page = vars.thumb_page + vars.thumb_interval;	        				$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});						}					}				}											}		    	 	},	 		 		 	/* After Slide Transition		----------------------------*/	 	afterAnimation : function(){	 		if (api.options.progress_bar && !vars.is_paused) theme.progressBar();	//  Start progress bar	 	},	 		 		 	/* Progress Bar		----------------------------*/		progressBar : function(){    		$(vars.progress_bar).stop().css({left : -$(window).width()}).animate({ left:0 }, api.options.slide_interval);    	}	 		 	 };	 	 	 /* Theme Specific Variables	 ----------------------------*/	 $.supersized.themeVars = {	 		 	// Internal Variables		progress_delay		:	false,				// Delay after resize before resuming slideshow		thumb_page 			: 	false,				// Thumbnail page		thumb_interval 		: 	false,				// Thumbnail interval		image_path			:	'img/',				// Default image path															// General Elements									play_button			:	'#pauseplay',		// Play/Pause button		next_slide			:	'#nextslide',		// Next slide button		prev_slide			:	'#prevslide',		// Prev slide button		next_thumb			:	'#nextthumb',		// Next slide thumb button		prev_thumb			:	'#prevthumb',		// Prev slide thumb button				slide_caption		:	'#slidecaption',	// Slide caption		slide_current		:	'.slidenumber',		// Current slide number		slide_total			:	'.totalslides',		// Total Slides		slide_list			:	'#slide-list',		// Slide jump list											thumb_tray			:	'#thumb-tray',		// Thumbnail tray		thumb_list			:	'#thumb-list',		// Thumbnail list		thumb_forward		:	'#thumb-forward',	// Cycles forward through thumbnail list		thumb_back			:	'#thumb-back',		// Cycles backwards through thumbnail list		tray_arrow			:	'#tray-arrow',		// Thumbnail tray button arrow		tray_button			:	'#tray-button',		// Thumbnail tray button				progress_bar		:	'#progress-bar'		// Progress bar	 													 };														 /* Theme Specific Options	 ----------------------------*/													 $.supersized.themeOptions = {						 						   		progress_bar		:	1,		// Timer for each slide													mouse_scrub			:	0		// Thumbnails move with mouse			 };		})(jQuery);

[justsomeguy]

 

 

For the code of thumtray have news??

I already told you what needs to be done, I'm not going to do it for you. We're here to teach people how to do this stuff, not do it for them.

 

 

 

this code is good?

That looks like the original code for the theme file. This is the code that runs when you click on the button to show or hide the thumbnails:

 

 

   // Thumbnail Tray Toggle   $(vars.tray_button).toggle(function(){    $(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");    return false;   }, function() {    $(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");    return false;   });

 

That uses the jquery toggle function, you can look that up if you want to see what it does. It gets 2 functions passed to it, one function will run on even-numbered clicks and the other will run on odd-numbered clicks. It looks like that's going to mess up if you try and hide the thing yourself, so it might be better to try and run the click event on the tray button element. It looks instead of all of that code where you want to hide the element, you can just use jQuery to target the tray button and call jQuery's click method on it. Doing that should run the same code as if someone actually clicked on it with the mouse.

[lukissimo81]

I did not want to be rude, unfortunately know little about programming, the plugin I like for my web page, and I just wanted to help the thumbnail

[lukissimo81]

i have resolved, in the file supersized.3.2.7.js, i have add in the line 272 this code $(vars.tray_button).trigger('click').

 

Thanks