2

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

Jason Weber
  • 5,653
  • 6
  • 40
  • 73

1 Answers1

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.

Muhammad Usman
  • 12,439
  • 6
  • 36
  • 59
  • Hey, thanks a lot for that link, Usman! I finally have some thumbnails appearing on the screen. The only issue I have left, is that when clicking on a thumbnail, it directs the browser to mydomain/images/thumbnail1.jpg instead of staying on the slide on the homepage and just going to the particular slide it should be pointing to. If you have any suggestions for that, I'd really appreciate it. – Jason Weber Dec 26 '11 at 16:42
  • Oops ... got cut off. I just wanted to say again, thanks for your time in reading my problem and offering a solution. – Jason Weber Dec 26 '11 at 16:42
  • Hey Usman, if you're still reading this, quick question. My thumbnails are there, and they're pointing to the slide picture, as it says to do. But it's literally going to URL of my picture, instead of staying on the page and just going to that slide. I don't know what I'm doing wrong! – Jason Weber Dec 26 '11 at 20:32
  • @JasonWeber Maybe you are having a JS error, check for any error with Firebug console or Chrome Developer Tools (Ctrl+Shift+I) Console. – Muhammad Usman Dec 27 '11 at 07:56
  • I have Chrome Web Developer Tools plugin installed on my Chrome, but I solved it, Usman ... it was just a stylesheet issue. I was getting so confused looking at the javascript that I forgot about the .css, and I just made a minor adjustment. Thanks again for your help! – Jason Weber Dec 27 '11 at 16:03