Databases
StackOverflow2013
Postsdbo
POModify jQuery slider for greater control: add clickable preview thumbnails that goes to that corresponding slide
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POModify jQuery slider for greater control: add clickable preview thumbnails that goes to that corresponding slide
    text
    copied!<p>I'd like to modify a jQuery slideshow that is based upon <a href="http://ennuidesign.com/demo/contentslider/" rel="nofollow">Ennui Design's slider</a> to have a list of icons or thumbnails that give a small preview of the following frames content and the option to jump to that particular slide, or a list of bullets with a preview like <a href="http://wowslider.com/best-jquery-slider-crystal-linear-demo.html" rel="nofollow">this slideshow</a></p> <p>I would greatly appreciate if I could be guided into how I can achieve this, either by looking at a jQuery plugin, or what needs to be modified in the jquery script below.</p> <p>I've tried to pull together samples of it, using this code</p> <pre><code>(function($){ $(function(){ $('#nav&gt;li&gt;a').hover( function(){ $(this).stop(1); $(this).animate({'background-position':'0px 0'}); }, function(){ $(this).stop(1); $(this).animate({'background-position':'-140px 0'}); } ) $('.boxgrid').each(function(){ var $caption = $(this).find('span.boxcaption'); var pheight = $(this).height(); $caption.css('top', pheight ); $(this).hover( function(){ $caption.stop(1); $caption.animate({ top: pheight - $caption.height() }); }, function(){ $caption.stop(1); $caption.animate({ top: pheight }) } ) }); }); })(jQuery); </code></pre> <p>and I'm running into multiple errors if I switch between using the prev/next buttons and the preview thumbs:</p> <ol> <li><p>the prev controls disappear if I'm using the preview thumbs,</p></li> <li><p>the last slide next control offer an empty slide, </p></li> <li><p>the page's URL shows the hash at the end of the page (example - testing.com/example.cfm#s1) and then the prev/next buttons can't access any slide</p></li> <li><p>the preview thumbs, if clicked a few times, will start to show the text of one item and the image slide of another (50/50 of two slide frames.</p></li> </ol> <p>I have included the basis of the html code below:</p> <pre><code> &lt;!---html page code ---&gt; &lt;div id="s"&gt; &lt;div class="bullets"&gt; &lt;div&gt; &lt;a href="#s0" title=" "&gt;&lt;img src="images/1/tooltips/0.jpg" alt=" "/&gt;1&lt;/a&gt; &lt;a href="#s1" title=" "&gt;&lt;img src="images/1/tooltips/1.jpg" alt=" "/&gt;2&lt;/a&gt; &lt;a href="#s2" title=" "&gt;&lt;img src="images/1/tooltips/2.jpg" alt=" "/&gt;3&lt;/a&gt; &lt;div class="bullet-frame" style="display: none; left: 24px; opacity: 0; top:20px;"&gt; &lt;div&gt; &lt;!--- blank div ---&gt; &lt;div style="width: 900px; left: 0px;"&gt; &lt;img alt=" " src="images/1/tooltips/0.jpg"&gt; &lt;img alt=" " src="images/1/tooltips/1.jpg"&gt; &lt;img alt=" " src="images/1/tooltips/2.jpg"&gt; &lt;/div&gt; &lt;!--- div style width 1100% ---&gt; &lt;/div&gt; &lt;!--- blank div END ---&gt; &lt;span&gt;&lt;/span&gt; &lt;/div&gt; &lt;!--- bullet-frame ---&gt; &lt;div class="ws_shadow"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--- end preview thumbs ---&gt; &lt;!--- start slideshow ---&gt; &lt;div id="one" class="contentslider"&gt; &lt;div class="cs_wrapper"&gt; &lt;div class="cs_slider"&gt; &lt;!--- s0 ---&gt; &lt;div class="cs_article" id="s0"&gt; &lt;h2&gt;s0 slide&lt;/h2&gt; &lt;div id="main_view10"&gt; &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;sample text&lt;/p&gt; &lt;div class="container"&gt; &lt;ul class="thumb10"&gt; &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt; &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;!--- End s0 ---&gt; &lt;!--- s1 ---&gt; &lt;div class="cs_article" id="s1"&gt; &lt;h2&gt;s1 slide&lt;/h2&gt; &lt;div id="main_view10"&gt; &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;sample text&lt;/p&gt; &lt;div class="container"&gt; &lt;ul class="thumb10"&gt; &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt; &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;!--- End s1 ---&gt; &lt;!--- s2 ---&gt; &lt;div class="cs_article" id="s2"&gt; &lt;h2&gt;s2 slide&lt;/h2&gt; &lt;div id="main_view10"&gt; &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;sample text&lt;/p&gt; &lt;div class="container"&gt; &lt;ul class="thumb10"&gt; &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt; &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;!--- End s2 ---&gt; &lt;!--- Article Ends ---&gt; &lt;/div&gt;&lt;!-- End cs_slider --&gt; &lt;/div&gt;&lt;!-- End cs_wrapper --&gt; &lt;/div&gt;&lt;!-- End contentslider --&gt; &lt;script type="text/javascript"&gt; $(function() { $('#one').ContentSlider({ width : '900px', height : '400px', speed : 800, easing : 'easeInOutBack' }); }); &lt;/script&gt; </code></pre> <p>The following below is the jQuery of the slider</p> <pre><code>(function($) { $.fn.ContentSlider = function(options) { var defaults = { leftBtn : 'images/cs_leftImg.jpg', rightBtn : 'images/cs_rightImg.jpg', width : '900px', height : '400px', speed : 400, easing : 'easeOutQuad', textResize : false, IE_h2 : '26px', IE_p : '11px' } var defaultWidth = defaults.width; var o = $.extend(defaults, options); var w = parseInt(o.width); var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length; var x = -1*w*n+w; // Minimum left value var p = parseInt(o.width)/parseInt(defaultWidth); var thisInstance = this.attr('id'); var inuse = false; // Prevents colliding animations function moveSlider(d, b) { var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left')); if(isNaN(l)) { var l = 0; } var m = (d=='left') ? l-w : l+w; if(m&lt;=0&amp;&amp;m&gt;=x) { b .siblings('.cs_wrapper') .children('.cs_slider') .animate({ 'left':m+'px' }, o.speed, o.easing, function() { inuse=false; }); if(b.attr('class')=='cs_leftBtn') { var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); } else { var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); } if(m==0||m==x) { thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); } if(otherBtn.css('opacity')=='0') { otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing }); } } } function vCenterBtns(b) { // Safari and IE don't seem to like the CSS used to vertically center // the buttons, so we'll force it with this function var mid = parseInt(o.height)/2; b .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end() .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 }); } return this.each(function() { $(this) // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) // Add the buttons to move left and right .prepend('&lt;a href="#" class="cs_leftBtn"&gt;&lt;img src="'+o.leftBtn+'" /&gt;&lt;/a&gt;') .append('&lt;a href="#" class="cs_rightBtn"&gt;&lt;img src="'+o.rightBtn+'" /&gt;&lt;/a&gt;') // Dig down to the article div elements .find('.cs_article') // Set the width and height of the div to the defined size .css({ width:o.width, height:o.height }) .end() // Animate the entrance of the buttons .find('.cs_leftBtn') .css('opacity','0') .hide() .end() .find('.cs_rightBtn') .hide() .animate({ 'width':'show' }); // Resize the font to match the bounding box if(o.textResize===true) { var h2FontSize = $(this).find('h2').css('font-size'); var pFontSize = $(this).find('p').css('font-size'); $.each(jQuery.browser, function(i) { if($.browser.msie) { h2FontSize = o.IE_h2; pFontSize = o.IE_p; } }); $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); } // Store a copy of the button in a variable to pass to moveSlider() var leftBtn = $(this).children('.cs_leftBtn'); leftBtn.bind('click', function() { if(inuse===false) { inuse = true; moveSlider('right', leftBtn); } return false; // Keep the link from firing }); // Store a copy of the button in a variable to pass to moveSlider() var rightBtn = $(this).children('.cs_rightBtn'); rightBtn.bind('click', function() { if(inuse===false) { inuse=true; moveSlider('left', rightBtn); } return false; // Keep the link from firing }); vCenterBtns($(this)); // This is a CSS fix function. }); } })(jQuery) </code></pre> <p>Thank you in advance!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload