CODEWITHSUNDEEP
jquerysliderimage-gallery
jerrygarciuh
jerrygarciuh

Reputation: 21988

jQuery Slides Plugin: Slide image not visible when only one slide is present

I am working with Nathan Searles very nice Slides plugin.

I have a page with multiple dynamic instances of the slides display: http://hnoc.dreamhosters.com/dev/property_info.php?lot=22644

When only one image is present in the slider the image is not displayed. The first slider at the link above displays this issue. When multiple images are present they all display fine: http://hnoc.dreamhosters.com/dev/property_info.php?lot=22622

Here is the code for the single image at the first link.

Does this ring any bells? Do I have an error?

Any advice most appreciated!

<div id="container1">
<div id="slides1">
<div class="slides_container">
<div class="slides_control">
<div class="slide" style="">
<a href="images/intermediate/I014N1013.jpg" rel="lightbox" title="Title: Plan of eight lots of ground with the buildings and improvements thereon...">
<img class="content" src="images/covers/C014N1013.jpg" alt="C014N1013.jpg"></a>
<div class="caption" style="bottom: 0px; ">Plan of eight lots of ground with the buildings and improvements thereon... </div>
</div> <!-- slide -->
</div> <!-- slides_control -->
</div> <!-- slides_container -->
<a href="#" class="prev"><img src="js/slides/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="js/slides/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>   
</div> <!-- slides1 -->
<img src="js/slides/img/example-frame.png" width="739" height="341" alt="Frame" id="frame1">
</div>

Upvotes: 0

Views: 1989

Answers (1)

jerrygarciuh
jerrygarciuh

Reputation: 21988

Edit slides.jquery.js

// after the variable setting on and after line 29
var elem = $(this),
control = $('.slides_control',elem),
total = control.children().size(),
... snip ...
playInterval;

add 

if (total == 1){        
  $('.'+option.container,elem).css({display:'block'});          
  // disable prev/next imgs
  $('.'+option.prev+' img',elem).css({display:'none'});
  $('.'+option.next+' img',elem).css({display:'none'});
}

That solves it.

Peace.

Upvotes: 1

Related Questions