Question

I am working on creating a photogallery slideshow and am using the code from this site: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html.

I have incorporated the code as it is written and I got the slideshow working, but it is not working correctly. The first image displays correctly, but with each subsequent image it does not line up correctly, and the last image does not show up at all. The problem for the last image happens no matter how many images I have. If I show only 4 images then image #4 does not show. If I show 8 images then image #8 does not show.

You can view my slideshow here: http://jvidell.com/harlowlake.html

Any thoughts or ideas on why it is not lining up correctly after the first image and not showing the last image?

Here is the HTML for the images:

 <div id="galleryMargin">
 <div id="gallery" class="svw" style="width: 750px; height: 498px;">
 <ul>
 <li><img src="img/harlowLake/HL001a.jpg" /></li>
 <li><img src="img/harlowLake/HL002a.jpg" /></li>
 <li><img src="img/harlowLake/HL003a.jpg" /></li>
 <li><img src="img/harlowLake/HL004a.jpg" /></li>
 </ul>
 </div> 
 </div>

Here is the script:

 <script type="text/javascript">
$(window).bind("load", function() {
$("div#gallery").slideView()
 });
 </script>

Answer 1

The Problem is you have set border on your slideshow image which makes entire images width than the container width. So just remove the border then it you should see the last image.

img {
/*border: 1px solid black;*/ /*Remove this line*/
display: inline;
}