Question

I’m terrible at javascript and css, but I did manage to implement the Jquery Cycle plugin into my homepage. I tried to add thumbnails, so while it’s still cycling on auto, the end-user can click a thumbnail to go back, instead of having to wait 8 or 9 slides later.

javascript code:

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript">  
$(document).ready(init);
    function init() {
        // dynamically add a div to hold the slideshow's pager
        $(".homepageimages").before('<div class="pager"></div>');

        // now to use the cycle plugin
        $(".homepageimages").cycle({
            pause: 1,
            pager: ".pager"
        });
    }
 </script>

HTML code:

<div id="slideshow">
     <div class="homepageimages"
         <asp:Hyperlink ID="HyperLink1" runat="server"
           ImageUrl="~/images/usshomepagegraphic.jpg" height="319" width="864"
            NavigateUrl="~about.aspx" Target="_self"></asp:HyperLink>
         <asp:Hyperlink ID="HyperLink4" runat="server"
           ImageUrl="~/images/collage.jpg" height="319" width="864"
            NavigateUrl="~services.aspx" Target="_self"></asp:HyperLink>
      </div>
 </div>

css:

.slideshow {  
height:  319px;  
width:   864px;  
padding: 0;  
margin:  0;  
} 

.slideshow img {  
padding: 0px;  
border:  0px solid #ccc;  
background-color: #eee;  
width:  864px; 
height: 319px; 
top:  0; 
left: 0 
}

Here’s a photobucket link to what I’m looking at. The picture is of my cycler, and the pager link is in the upper left — just text numbers 1-7, for all 7 slides:
http://s1209.photobucket.com/albums/cc387/jdluski/?action=view&current=jquerythumbnails.png

But I cannot turn these text numbers into thumbnails. Whenever I try, from the Jquery Cycle’s instructions or some other persons’s online instruction, usually the pictures just end up right on top of one another, or I get a long, huge error message in my browser.

I’d like to continue cycling on auto, but have thumbnails in case the end user wants to go back, but I’m at an impasse. I’m to the point now where I’m so confused, I don’t know what to even try to tinker with, the jquery.cycle.all.js file, the javascript, the css, the html.

Thanks a bunch for reading this, and all help would be sincerely appreciated!

Jason Weber

Answer 1

As you are not good at JS try using this plugin which is ready to serve your purpose.

http://wayfarerweb.com/jquery/plugins/simplethumbs/

It has ready thumbnail option.