lukissimo81 Posted September 6, 2013 Author Share Posted September 6, 2013 one last question. which is the normal size of the images corrected fullscreeen? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 6, 2013 Share Posted September 6, 2013 I'm not sure what you're asking. Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 6, 2013 Author Share Posted September 6, 2013 I solved the size of images. solved the problem of thumb? Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 6, 2013 Author Share Posted September 6, 2013 What size do I need images to have them in full screen? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 6, 2013 Share Posted September 6, 2013 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. Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 7, 2013 Author Share Posted September 7, 2013 For the code of thumtray have news?? Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 7, 2013 Author Share Posted September 7, 2013 in the script there is the function resize automatic for full screen? Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 8, 2013 Author Share Posted September 8, 2013 automatic resize is resolved, in the code there is an option. the problem is only the thumbtray. i hope in your help!! thanks Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 8, 2013 Author Share Posted September 8, 2013 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); Link to comment Share on other sites More sharing options...
justsomeguy Posted September 9, 2013 Share Posted September 9, 2013 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. Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 9, 2013 Author Share Posted September 9, 2013 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 Link to comment Share on other sites More sharing options...
lukissimo81 Posted September 11, 2013 Author Share Posted September 11, 2013 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now