15 Replies Latest reply on Mar 8, 2010 12:35 PM by MJ2516

    Rotating Banner 2- How do you add links to images with div tags?

    MJ2516

      I have a rotating images banner and need to add links to each image. I used Jon Raasch's Simple  jQuery Slideshow, suggested here.

       

      When asked how to add links to each image, he wrote "A more robust solution is to wrap each frame in a div and target the div’s instead of the images (or anchors). This would allow you to add text, multiple images, etc."

       

      Here's my code. Can anyone show me how to wrap the images in div tags, and add a placeholder url like "index.html?"

       

      ------------------------------

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>


      <script type="text/javascript" src="../jquery-simple-slideshow-example/jquery-1.2.6.min.js"></script>

       

      <script type="text/javascript">


      function slideSwitch() {
          var $active = $('#slideshow IMG.active');

       

          if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

       

          // use this to pull the images in the order they appear in the markup
          var $next =  $active.next().length ? $active.next()
              : $('#slideshow IMG:first');

       

          // uncomment the 3 lines below to pull the images in random order
         
          // var $sibs  = $active.siblings();
          // var rndNum = Math.floor(Math.random() * $sibs.length );
          // var $next  = $( $sibs[ rndNum ] );


          $active.addClass('last-active');

       

          $next.css({opacity: 0.0})
              .addClass('active')
              .animate({opacity: 1.0}, 1000, function() {
                  $active.removeClass('active last-active');
              });
      }

       

      $(function() {
          setInterval( "slideSwitch()", 5000 );
      });

       

      </script>

       

      <style type="text/css">

       

      /*** set the width and height to match your images **/

       

      #slideshow {
          position:relative;
          height:157px;
          width: 220px;
      }

       

      #slideshow IMG {
          position:absolute;
          top:0;
          left:0;
          z-index:8;
          opacity:0.0;
      }

       

      #slideshow IMG.active {
          z-index:10;
          opacity:1.0;
      }

       

      #slideshow IMG.last-active {
          z-index:9;
      }

       

      </style>

       

      </head>

       

      <body style="font-family: Arial, Sans-serif, sans;">

       

      <h1> </h1>

       

      <!-- this will work with any number of images -->
      <!-- set the active class on whichever image you want to show up as the default
      (otherwise this will be the last image) -->

       

      <div id="slideshow">
      <img src="donate.gif" alt="Donate Now" />
      <img src="DVD.gif" alt="DVD Store" />
      <img src="legis3.jpg" alt="Legislative Coverage" align="top" class="active" /> </div>


      </body>
      </html>

      ----------------------------

       

      Do each of the three img src lines need <div id=slideshow"> ?

      Thanks for any help.

        • 1. Re: Rotating Banner 2- How do you add links to images with div tags?
          370H55V Level 4

          Do each of the three img src lines need <div id=slideshow"> ?

           

          They shouldn't if they are part if the same rotating banner. To add the tags would be redundant and likely throw off the appearance of the whole page.

          If you have multiple banners, you could use a separate div for each of them.

          • 2. Re: Rotating Banner 2- How do you add links to images with div tags?
            osgood_ Level 8

            Not sure about the jquery plugin that you are using but there are others which work similarly:

             

            First you need to download the jquery plugin scripts:

             

            1) jquery.fancybox-1.3.0.js downloadable at http://fancybox.net/

             

            2) jquery.cycle.all.min.js downloadable at http://malsup.com/jquery/cycle/

             

            Make sure the above .js scripts are sitting directly within your site folder, NOT in a folder within your site folder.

             

            Next copy all the html code below and dump into a new Dreamweaver document. Save it to your site folder. View in browser. Your images will now have links associated with them. Change the link urls, which are currently wrapping the images, to what you require.

             

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js"></script>
                <script type="text/javascript" src="jquery.fancybox-1.3.0.js"></script>
                <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
               
                <script type="text/javascript">
                    $j=jQuery.noConflict();
                    $j(document).ready(function() {
                        $j("a.video").fancybox({
                            'overlayOpacity'    :    0.8,
                            'overlayColor'        :    '#000',
                            'frameHeight'        :    315,
                            'hideOnContentClick'    : false
                        });

             

                        $j("a.form").fancybox({
                            'overlayOpacity'    :    0.6,
                            'overlayColor'        :    '#000',
                            'hideOnContentClick'    : false
                        });

             

                        $j("a.zoom").fancybox({
                            'zoomSpeedIn'        :    500,
                            'zoomSpeedOut'        :    500,
                            'overlayColor'        :    '#000',
                            'overlayOpacity'    :    0.3
                        });
                    });
                   
               
                    $j2=jQuery.noConflict();
                        $j2(document).ready(function() {
                        $j2('#slideShow').cycle({
                            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                            timeout: 5000,
                            random:0
                        });
                    });
                </script>
            </head>

             

            <body>
              <div id="slideShow">
                    <a href="http://www.bbc.co.uk"><img src="donate.gif" alt="Donate Now" /></a>
                    <a href="http://www.itv.co.uk"><img src="DVD.gif" alt="DVD Store" /></a>
                    <a href="http://www.thisismoney.co.uk"><img src="legis3.jpg" alt="Legislative Coverage" align="top" class="active" /></a>
                    </div>
            </body>
            </html>

            • 3. Re: Rotating Banner 2- How do you add links to images with div tags?
              MJ2516 Level 1

              Thanks for your reply.

              I copied these files to my remote server root folder;

              jquery-1.2.6.min.js, jquery.cycle.all.js, jquery.cycle.all.min.js, jquery.cycle.js, jquery.cycle.lite.js, jquery.cycle.lite.min.js, jquery.cycle.lite.min.js I "Put" them in Dreamweaver.

              I made a new file, pasted in your code, the banner images unstacked now. Previewed in IE7, turned off pop up blocker, but no rotation, and the images are not stacked.

              They do have linked URLs, which is what I asked for.

              Any suggestions on how to fix the stacking and rotation?

              • 4. Re: Rotating Banner 2- How do you add links to images with div tags?
                osgood_ Level 8

                we210 wrote:

                 

                Thanks for your reply.

                I copied these files to my remote server root folder;

                jquery-1.2.6.min.js, jquery.cycle.all.js, jquery.cycle.all.min.js, jquery.cycle.js, jquery.cycle.lite.js, jquery.cycle.lite.min.js, jquery.cycle.lite.min.js I "Put" them in Dreamweaver.

                I made a new file, pasted in your code, the banner images unstacked now. Previewed in IE7, turned off pop up blocker, but no rotation, and the images are not stacked.

                They do have linked URLs, which is what I asked for.

                Any suggestions on how to fix the stacking and rotation?

                 

                Ok but you only need 'jquery.cycle.all.min.js'

                 

                Also have you downloaded the 'fancybox.js' from the below link and put that in your root folder? Without it the images WILL NOT be stacked.

                 

                1) jquery.fancybox-1.3.0.js downloadable at http://fancybox.net/

                • 5. Re: Rotating Banner 2- How do you add links to images with div tags?
                  MJ2516 Level 1

                  These files are in the root folder of the remote server;

                  jquery.cycle.all.min.js, jquery.fancybox-1.3.0.js, and even  jquery.fancybox-1.3.0.css

                  but they are still not stacked or rotating.

                  Here's my code;

                  --------------------------

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>Untitled Document</title>
                  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js"></script>
                      <script type="text/javascript" src="jquery.fancybox-1.3.0.js"></script>
                      <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
                    
                      <script type="text/javascript">
                          $j=jQuery.noConflict();
                          $j(document).ready(function() {
                              $j("a.video").fancybox({
                                  'overlayOpacity'    :    0.8,
                                  'overlayColor'        :    '#000',
                                  'frameHeight'        :    315,
                                  'hideOnContentClick'    : false
                              });

                   

                   

                   

                              $j("a.form").fancybox({
                                  'overlayOpacity'    :    0.6,
                                  'overlayColor'        :    '#000',
                                  'hideOnContentClick'    : false
                              });

                   

                   

                   

                              $j("a.zoom").fancybox({
                                  'zoomSpeedIn'        :    500,
                                  'zoomSpeedOut'        :    500,
                                  'overlayColor'        :    '#000',
                                  'overlayOpacity'    :    0.3
                              });
                          });
                        
                    
                          $j2=jQuery.noConflict();
                              $j2(document).ready(function() {
                              $j2('#slideShow').cycle({
                                  fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                                  timeout: 5000,
                                  random:0
                              });
                          });
                      </script>
                  </head>

                   

                   

                   

                  <body>
                  <div id="slideShow">
                  <a href="https://www.page1.org"><img src="donate.gif" alt="Donate Now" /></a>
                  <a href="https://www.page2.org"><img src="DVD.gif" alt="DVD Store" /></a>
                  <a href="https://www.page3.org"><img src="legis3.jpg" alt="Legislative Coverage" align="top" class="active" /> </a></div>
                  </body>
                  </html>

                  • 6. Re: Rotating Banner 2- How do you add links to images with div tags?
                    osgood_ Level 8

                    we210 wrote:

                     

                    These files are in the root folder of the remote server;

                    jquery.cycle.all.min.js, jquery.fancybox-1.3.0.js, and even  jquery.fancybox-1.3.0.css

                    but they are still not stacked or rotating.


                     

                    First remove align="top" class="active" from the image tag below.

                     

                    <a href="https://www.page3.org"><img src="legis3.jpg" alt="Legislative Coverage" align="top" class="active" />.

                     

                    Also add to the img tags the width and height of the images as a precautionary measure. They are presumably all the same dimension or should be.

                     

                    Replace with you own dimensions: <img src="legis3.jpg" alt="Legislative Coverage" width="300" height="199" />

                     

                     

                    If the jquery files are on the remote server then try adding a leading / before the paths to them as shown below.

                    <script type="text/javascript" src="/jquery.fancybox-1.3.0.js"></script>
                        <script type="text/javascript" src="/jquery.cycle.all.min.js"></script>

                     

                    I've tested the last code you posted in a page I set up locally on my machine and everything works perfectly in PC IE7 (don't know about IE6 or IE8 as I don't have those on this machine) It also works in MAC Firefox and Safari. All images cycle (rotate) and have a link associated with them.

                     

                    I think there's a big possibility that you have not set the right url links to the scripts.

                     

                    Lets just go through some simple set-up steps.

                     

                    1) You've created a site folder locally on your computer AND defined it in Dreamweaver

                     

                    2) You have both the jquery.fancybox-1.3.0.js and jquery.cycle.all.min.js files sitting directly within the site folder NOT in another folder within the site folder?

                     

                    3) You are using exactly the same code as in your last post (apart from deleting align="top" class="active" from legis3.jpg img tag) ?

                     

                    4) The Dreamweaver file is also sitting directly within the site folder and NOT in another folder within the site folder?

                     

                    5) Although it works in IE7 you need to add the below to your css:

                     

                    #slideShow a {
                    display: block;
                    width: /* width of your image */;
                    height: /* height of your image */;
                    }
                    a img {
                    border: none;
                    }

                    • 7. Re: Rotating Banner 2- How do you add links to images with div tags?
                      MJ2516 Level 1

                      Thanks again for your help. It's working now, I didn't have the html file in the root folder.

                      Here's my current code. The only remaining issue is a blue outline around the image in IE and Firefox. Any idea what's causing that?

                       

                      ------------------

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                      <title>Untitled Document</title>
                      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js"></script>
                          <script type="text/javascript" src="/jquery.fancybox-1.3.0.js"></script>
                          <script type="text/javascript" src="/jquery.cycle.all.min.js"></script>
                       
                          <script type="text/javascript">
                              $j=jQuery.noConflict();
                              $j(document).ready(function() {
                                  $j("a.video").fancybox({
                                      'overlayOpacity'    :    0.8,
                                      'overlayColor'        :    '#000',
                                      'frameHeight'        :    315,
                                      'hideOnContentClick'    : false
                                  });

                       


                                  $j("a.form").fancybox({
                                      'overlayOpacity'    :    0.6,
                                      'overlayColor'        :    '#000',
                                      'hideOnContentClick'    : false
                                  });

                       

                       

                       

                                  $j("a.zoom").fancybox({
                                      'zoomSpeedIn'        :    500,
                                      'zoomSpeedOut'        :    500,
                                      'overlayColor'        :    '#000',
                                      'overlayOpacity'    :    0.3
                                  });
                              });
                           
                       
                              $j2=jQuery.noConflict();
                                  $j2(document).ready(function() {
                                  $j2('#slideShow').cycle({
                                      fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                                      timeout: 5000,
                                      random:0
                                  });
                              });
                          </script>
                      </head>

                      <body>
                      <div id="slideShow">
                      <a href="https://www.page1.org"><img src="images/donate.gif" alt="Donate Now" width="220" height="157"/></a>
                      <a href="https://www.page2.org"><img src="images/DVD.gif" alt="DVD Store" width="220" height="157"/></a>
                      <a href="https://www.page3.org"><img src="images/legis3.jpg" width="220" height="157"/> </a></div>
                      </body>
                      </html>

                      • 8. Re: Rotating Banner 2- How do you add links to images with div tags?
                        osgood_ Level 8

                        we210 wrote:

                         


                        The only remaining issue is a blue outline around the image in IE and Firefox. Any idea what's causing that?

                         


                         

                        Added the below to your css file and the blue border will disappear:

                         

                        #slideShow a {
                        display: block;
                        width: 220px;
                        height: 157px;
                        }
                        a img {
                        border: none;
                        }

                         

                        Incidentally you might want to go grab the jquery.js script which is linked outside your site (see link below). Insert it in a new javascript Dreamweaver document and access the script directly by linking it in the same location as the other two jquery scripts, in your site folder.

                         

                        I don't know if that script is hosted indefinitely at that url but if the page goes or the website goes down your page won't work either, so its best to grab the script and link directly to it by hosting the script on your server.

                         

                        http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js

                        • 9. Re: Rotating Banner 2- How do you add links to images with div tags?
                          MJ2516 Level 1

                          Do I add this code directly in the html file, or create a separate CSS file and apply it to the images? If so, does the separate CSS file have to be saved in the root dir also?

                          If directly into the  html file, where does it go?

                          Thanks very much for your help.

                          • 10. Re: Rotating Banner 2- How do you add links to images with div tags?
                            osgood_ Level 8

                            we210 wrote:

                             

                            Do I add this code directly in the html file, or create a separate CSS file and apply it to the images? If so, does the separate CSS file have to be saved in the root dir also?

                            If directly into the  html file, where does it go?

                            Thanks very much for your help.

                             

                            Add it to the pages code after the closing </script> tag and directly before the opening <body> tag (as shown below). If you add it directly to the pages code you must wrap it in a <style></style> tag as also shown

                             

                             

                            </script>

                             

                            <style type="text/css">

                            #slideShow a {

                            display: block;

                            width: 220px;

                            height: 157px;

                            }

                            a img {

                            border: none;

                            }

                            </style>

                             

                             

                            </head>

                            <body>

                            <div id="slideShow">

                            • 11. Re: Rotating Banner 2- How do you add links to images with div tags?
                              MJ2516 Level 1

                              I did that and the images became stacked vertically, and no longer rotate-

                              but the blue border is gone;
                              -----------------

                               

                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                              <html xmlns="http://www.w3.org/1999/xhtml">
                              <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                              <title>Untitled Document</title>
                              <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js"></script>
                                  <script type="text/javascript" src="dev/jquery.fancybox-1.3.0.js"></script>
                                  <script type="text/javascript" src="dev/jquery.cycle.all.min.js"></script>
                               
                                  <script type="text/javascript">
                                      $j=jQuery.noConflict();
                                      $j(document).ready(function() {
                                          $j("a.video").fancybox({
                                              'overlayOpacity'    :    0.8,
                                              'overlayColor'        :    '#000',
                                              'frameHeight'        :    315,
                                              'hideOnContentClick'    : false
                                          });

                               

                                           $j("a.form").fancybox({
                                              'overlayOpacity'    :    0.6,
                                              'overlayColor'        :    '#000',
                                              'hideOnContentClick'    : false
                                          });

                               

                                           $j("a.zoom").fancybox({
                                              'zoomSpeedIn'        :    500,
                                              'zoomSpeedOut'        :    500,
                                              'overlayColor'        :    '#000',
                                              'overlayOpacity'    :    0.3
                                          });
                                      });
                                   
                               
                                      $j2=jQuery.noConflict();
                                          $j2(document).ready(function() {
                                          $j2('#slideShow').cycle({
                                              fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                                              timeout: 5000,
                                              random:0
                                          });
                                      });
                                             
                              </script>
                                  
                              <style type="text/css">
                              #slideShow a {
                              display: block;
                              width: 220px;
                              height: 157px;
                              }
                              a img {
                              border: none;
                              }
                              </style>

                              </head>
                              <body>
                              <div id="slideShow">
                              <a href="https://www.page1.org"><img src="images/donate.gif" alt="Donate Now" width="220" height="157"/></a>
                              <a href="https://www.page2.org"><img src="images/DVD.gif" alt="DVD Store" width="220" height="157"/></a>
                              <a href="https://www.page3.org"><img src="images/legis3.jpg" width="220" height="157"/> </a></div>
                              </body>
                              </html>

                              • 12. Re: Rotating Banner 2- How do you add links to images with div tags?
                                osgood_ Level 8

                                we210 wrote:

                                 

                                I did that and the images became stacked vertically, and no longer rotate-

                                but the blue border is gone;

                                 

                                 

                                Humm. I can't see why introducing that block of css code would affect whether the images rotate or not.

                                 

                                The images will be stacked vertically as that is what display: block; tells them to do, that's ok.

                                 

                                I'll run a check when I get back behind my computer tomorrow. For now try moving that block of css code to before the opening <script> tag.

                                • 13. Re: Rotating Banner 2- How do you add links to images with div tags?
                                  MJ2516 Level 1

                                  No, it did not correct the problem.

                                  Thanks again.

                                  • 14. Re: Rotating Banner 2- How do you add links to images with div tags?
                                    osgood_ Level 8

                                    we210 wrote:

                                     

                                    No, it did not correct the problem.

                                    Thanks again.

                                     

                                    Looking at the last code you posted you have changed the url links to the two jquery scripts to dev/jquery.fancy.box-1.3.0.js etc. It appears that the scripts might not be in that 'dev' folder??

                                     

                                     

                                    <script type="text/javascript" src="dev/jquery.fancybox-1.3.0.js"></script>
                                        <script type="text/javascript" src="dev/jquery.cycle.all.min.js"></script>

                                     

                                     

                                    The images failing to rotate has nothing to do with the block of css code or where it is inserted in the <head> section of the code but has everything to do with getting the links to the two jquery scripts correct.

                                    • 15. Re: Rotating Banner 2- How do you add links to images with div tags?
                                      MJ2516 Level 1

                                      That resolved the blue border issue, and the banner is rotating and linking correctly.

                                       

                                      Thank you so much for all your help. This is an amazingly helpful community.