Databases
StackOverflow2013
Postsdbo
POI'm attempting to embed a JQuery Slider with Navigation Arrows on my site
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI'm attempting to embed a JQuery Slider with Navigation Arrows on my site
    primarykey
    data
    text
    <p>I've attempted to build a JQuery Slider with Navigation and I can't figure out a few bugs in the script. I'm new to JQuery and struggling to find a fix. Here are some of my issues: 1) I have 4 images in the deck but my slider shows 9 dots in my (slideshowBox) pagination, 2) If I click on the previous arrow when the first slide loads...it goes to a blank image, and Third, my slideshowBox does not render properly. I have a test version running at <a href="http://www.chscottenterprises.com/home/newsroom" rel="nofollow">http://www.chscottenterprises.com/home/newsroom</a>.</p> <p>JQuery:</p> <pre><code> &lt;script type="text/javascript"&gt; $(document).ready(function() { //Execute the slideShow, set 10 seconds for each images slideShow(10000); }); function slideShow(speed) { $('ul.slideshow li').each(function() { $('.slideshowBox .dots').append('&lt;div class="dot"&gt;&lt;/div&gt;'); }); $('.slideshowBox .dots .dot').click(function() { gallery($(this).index()); }); //append a LI item to the UL list for displaying caption $('ul.slideshow').append('&lt;li id="slideshow-caption" class="caption"&gt;&lt;div class="slideshow-caption-container"&gt;&lt;h3&gt;&lt;a&gt;&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show'); $('.slideshowBox .dots .dot:first').addClass('selected'); //Get the caption of the first image from REL attribute and display it and add hyperlink $('#slideshow-caption a').html($('ul.slideshow li.show').find('img').attr('title')); $('#slideshow-caption a').attr('href', $('ul.slideshow li.show').find('a').attr('href')); $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity:1, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery("next")',speed); //pause the slideshow and show arrows on mouse over $('div.slideshowBox').hover( function () { clearInterval(timer); $('.arrow').css({visibility:'visible'}).animate({opacity: 1.0}, 200);; }, function () { timer = setInterval('gallery("next")',speed); $('.arrow').css({visibility:'hidden', opacity: 0.0}); } ); } function gallery(direction) { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); $(current).stop(); $('#slideshow-caption').stop(); //Get next image, if it reached the end of the slideshow, rotate it back to the first image if (direction == 'next') // select next item var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); else if (direction == 'prev') // select previous item var next = ((current.prev().length) ? (current.prev()) : $('ul.slideshow li:last').prev()); else if (!isNaN(direction)) // if is a number var next = $('ul.slideshow li:eq(' + direction + ')'); // change selected dot $('.slideshowBox .dots .dot:eq(' + next.index() + ')').addClass('selected').siblings().removeClass('selected'); //Get next image caption var title = next.find('img').attr('title'); var link = next.find('a').attr('href'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption (and change link href) $('#slideshow-caption').slideUp(300, function () { $('#slideshow-caption a').html(title).attr('href', link); $('#slideshow-caption p').html(desc); $('#slideshow-caption').css({height: 52}).slideDown(500); }); //Hide the current image current.animate({opacity: 0}, 1000).removeClass('show'); } &lt;/script&gt; </code></pre> <p>The CSS:</p> <pre><code> &lt;style type="text/css"&gt; body { font-family:verdana,sans-serif; font-size:12px; } .slideshowBox { position: relative; } ul.slideshow { background: #ffffff; list-style: none; margin: 0; overflow: hidden; padding: 0; position: relative; } ul.slideshow li img { height: 235px; } .slideshowBox, ul.slideshow, ul.slideshow li { width: 950px; height: 235px; } #slideshow-caption { height: 60px; } ul.slideshow li { left: 0; position: absolute; right: 0; text-align: center; } ul.slideshow li.show { z-index: 500; } ul img { border: none; } #slideshow-caption { position: absolute; bottom: 0; left: 0; color: #FFF; background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/black_85.png?attachauth=ANoY7cqw4Q_6-GBnddRVsy3FjGxQOwb2Kp4zz3n4jl2bMUCa_txTTfb9Xee0dEzadWq_ZmNyxM4TTdqH6GD081lJcbrsxQ16kI63oX90Fwc4DSP2jSI_81raNgZ_a4D7jXd04PMsoSW13vhosrGFEKZaDXuYXhd7-2KRSPQc0q-nIdHV4JyF8zVZueOn2FfpIu4nVk_UDNXTa2IU7LxlN4Eq3H_ZZID3bw%3D%3D&amp;attredirects=0"); z-index: 500; text-align: left; } #slideshow-caption .slideshow-caption-container { padding: 5px 15px; z-index: 1000; } #slideshow-caption a { color: #dd8d00; text-decoration: none; } #slideshow-caption a:hover { color: #ffffff; } #slideshow-caption h3 { margin: 0; padding: 0; font-size: 18px; } #slideshow-caption p { margin: 0px 0 0; padding: 0; } .arrow { position: absolute; top: 100px; z-index: 1500; visibility: hidden; opacity: 0; height: 40px; width: 40px; border: none; outline: none; } .arrow a { display: block; height: 100%; } .arrow.next { right: 20px; background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_next_sprite.png?attachauth=ANoY7cqVwJpVF-JAc2BC-Y81nH9gbtra8np5ed2djxRyqt863b4PuZ_CTDAF17qXmzwMFxvaFYLVdGZxApwwDI66j8BZ4_JDjS1059VkriiCYxKnSqYhbdEchGQA6a_gpcxgk_g-UJCdhd9Tn41X3SHqqOfgp_GahHTbg9NhlB4Ln2TrjOsYqzdIOHwY1TizMNv--1gopQPotVoC3qDbSWuEHUxYKdSLnirJcrQRu7xFP0pWEi4hGYQ%3D&amp;attredirects=0") 0 0; } .arrow.next:hover { background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_next_sprite.png?attachauth=ANoY7cqVwJpVF-JAc2BC-Y81nH9gbtra8np5ed2djxRyqt863b4PuZ_CTDAF17qXmzwMFxvaFYLVdGZxApwwDI66j8BZ4_JDjS1059VkriiCYxKnSqYhbdEchGQA6a_gpcxgk_g-UJCdhd9Tn41X3SHqqOfgp_GahHTbg9NhlB4Ln2TrjOsYqzdIOHwY1TizMNv--1gopQPotVoC3qDbSWuEHUxYKdSLnirJcrQRu7xFP0pWEi4hGYQ%3D&amp;attredirects=0") 0 -40px; } .arrow.prev { left: 20px; background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_prev_sprite.png?attachauth=ANoY7cor_Anhk7JAtmtiGJSbDSFbnvRYOG6h8Zi4bzjE4vhGK5O3gmSPMLEOBgNvzpCKNLVfEdmBS9uMTmNTpdIQS1JwzuBjPfOPoPpbh6awGGGHI1tRwTp8QPiAvbj3ykaEZnWlCscEBLrlQafj83XVeWyxW8Sf85FP0Jyu0L7oYv8A1lKqPJc0hdRhyO-CVKcb_qQCbSobzasORbnZaj_mfvqpwljeExsSVzZWWsP5WunHRIAqn_M%3D&amp;attredirects=0") 0 0; } .arrow.prev:hover { background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/arrow_prev_sprite.png?attachauth=ANoY7cor_Anhk7JAtmtiGJSbDSFbnvRYOG6h8Zi4bzjE4vhGK5O3gmSPMLEOBgNvzpCKNLVfEdmBS9uMTmNTpdIQS1JwzuBjPfOPoPpbh6awGGGHI1tRwTp8QPiAvbj3ykaEZnWlCscEBLrlQafj83XVeWyxW8Sf85FP0Jyu0L7oYv8A1lKqPJc0hdRhyO-CVKcb_qQCbSobzasORbnZaj_mfvqpwljeExsSVzZWWsP5WunHRIAqn_M%3D&amp;attredirects=0") 0 -40px; } .dots { position: absolute; z-index: 1500; bottom: 10px; right: 10px; } .dot { width: 12px; height: 12px; background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/dots.png?attachauth=ANoY7cqjjr-zhpVAtDE6Y7h3rxYQ-UnHo6Cs2mQ0w_VzKJs91jS3fRPdTlheIHunXUFtR5WXv7j6JuvWvGLn5301pFyWHL-bVFMmsryMhcn9yfWmNE5Z1VysCAtpeGwmBgSqYxY1kQLuOqe_nxabgOwAEdyJwCgNts2boUVk0NNuFYYXYbAVqxUUKNQED7f8mTLU7vQgsMdC6wjLIa-hnHOgQG_Wqb3zMw%3D%3D&amp;attredirects=0") 0 0; margin-left: 5px; float: left; cursor: hand; cursor: pointer; } .dot:hover, .dot.selected { background: url("https://4310b1a9-a-fed18fe2-s-sites.googlegroups.com/a/chscottenterprises.com/home/dots.png?attachauth=ANoY7cqjjr-zhpVAtDE6Y7h3rxYQ-UnHo6Cs2mQ0w_VzKJs91jS3fRPdTlheIHunXUFtR5WXv7j6JuvWvGLn5301pFyWHL-bVFMmsryMhcn9yfWmNE5Z1VysCAtpeGwmBgSqYxY1kQLuOqe_nxabgOwAEdyJwCgNts2boUVk0NNuFYYXYbAVqxUUKNQED7f8mTLU7vQgsMdC6wjLIa-hnHOgQG_Wqb3zMw%3D%3D&amp;attredirects=0") 0 -12px; } &lt;/style&gt; </code></pre> <p>The HTML:</p> <pre><code>&lt;body&gt; &lt;div class="slideshowBox"&gt; &lt;div class="dots"&gt; &lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="dot selected"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div style="visibility: hidden; opacity: 0;" class="arrow next"&gt;&lt;a href="javascript:void(0)" onclick="gallery('next')"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div style="visibility: hidden; opacity: 0;" class="arrow prev"&gt;&lt;a href="javascript:void(0)"onclick="gallery('prev')"&gt;&lt;/a&gt;&lt;/div&gt; &lt;ul class="slideshow"&gt; &lt;li style="opacity: 0;" class="show"&gt;&lt;a href="#"&gt;&lt;img src="https://lh3.googleusercontent.com/-xrC8F_tS8B4/T6E3ywGKtUI/AAAAAAAABys/ChojzK1RRCE/s800/HomePageBanner_A.png" onclick="window.open('http://www.chscottenterprises.com/services/business-strategy-services')" width="950" height="235" title ="Business Strategy - Experienced" alt="Implementing Strategies that Assure Success."/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="" style="opacity: 0;"&gt;&lt;a href="#"&gt;&lt;img src="https://lh3.googleusercontent.com/-syD-w41UPIA/T6E30F7NSRI/AAAAAAAABy8/LvWvGHU6fKE/s950/HomePageBanner_B.png" onclick="window.open('http://www.chscottenterprises.com/services/management-advisory-services')" width="950" height="235" title="Management Advisory - Knowledgeable" alt="Our Management Advisory Teams Deliver Valuable Insights."/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="" style="opacity: 0;"&gt;&lt;a href="#"&gt;&lt;img src="https://lh5.googleusercontent.com/-I4azNiYBkZg/T6E3zPM7FAI/AAAAAAAABy0/PrkodduH6cc/s950/HomePageBanner_C.png" onclick="window.open('http://www.chscottenterprises.com/services/technology-consulting')" width="950" height="235" title="Technology Consulting - Results Oriented" alt="Our Technology Consulting Teams Quickly Deliver Transformation."/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="" style="opacity: 0;"&gt;&lt;a href="#"&gt;&lt;img src="https://lh3.googleusercontent.com/-fF-IVr01AJo/T6E33apEhBI/AAAAAAAABzE/wkefINaptGw/s950/HomePageBanner_D.png" onclick="window.open('http://www.chscottenterprises.com/home/success-stories')" width="950" height="235" title="CHScottEnterprises" alt="Business Strategy | Management Advisory | Technology Consulting"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="opacity: 1; bottom: 0px; display: list-item; height: 60px;" id="slideshow-caption" class="caption"&gt;&lt;div class="slideshow-caption-container"&gt;&lt;h3&gt;&lt;a href="#"&gt;""&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;""&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCHSAdmin
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COYour javascript has this line, $('ul.slideshow li').each(function() { $('.slideshowBox .dots').append('<div class="dot"></div>'); }); and your <ul> has some <li>s that don't contain images that's why you are getting some of the extra dots.
      singulars
      1. POI'm attempting to embed a JQuery Slider with Navigation Arrows on my site
      1. USSalil Momin
    2. COThank you for the quick reply. I've made the edits and have it up and running on my main page.
      singulars
      1. POI'm attempting to embed a JQuery Slider with Navigation Arrows on my site
      1. USCHSAdmin
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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