How do I customize and slice Jquery Automatic, Infinate Carousel rotating slideshow into separate image links?

Question

Hi jquery experts.

I recently read top ten jquery techniques in Web designer mag and like the carousel effect on http://www.struttcouture.com. But I would like to customize it a little more. For example is there a way to slice up the images so different sections of each image can be made into links with in divs instead of unordered list items?

Would love to know your thoughts.

Thanks Judith

    <style>
    #gallery {
    padding:  3px;
    position:  relative;
    margin:   auto;
    height:   674px;
    width:   994px;
    overflow:  hidden;
    z-index:  1;
    padding-left: 1px;
   }
   #gallery ul {
position:relative;
width:20000px;
}
#gallery ul li {
float:left;
list-style:none outside none;
margin-right:2px;
}
 </style>
    <script src="scripts/jquery-1.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var item_width;
    var left_value;
    $(document).ready(function() {  

     var speed = 5000;  
     var run = setInterval('rotate()', speed);     
     item_width = $('#galleryinner li').outerWidth();   
     left_value = (item_width/2) * (-1);  
     left_value = left_value-52; 
     $('#galleryinner li:first').before($('#galleryinner li:last'));  
     $('#galleryinner ul').css({'margin-left' : left_value},2000);  

    });      
    function rotate() {
     var left_indent = parseInt($('#galleryinner ul').css('margin-left')) - item_width;  
     $('#galleryinner ul').animate({'margin-left' : left_indent}, 2000, function () {  
      $('#galleryinner li:last').after($('#galleryinner li:first'));                    
      $('#galleryinner ul').css({'margin-left' : left_value});  
     });  
     return false;  
    }

    </script>
    <div id="gallery">

     <div id="galleryinner">
      <ul>
       <li><img src="images/gallery1.jpg" alt="Strutt Couture Shoes" width="520" height="390" border="0" /></li>
       <li><img src="images/gallery2.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery3.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery4.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery5.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery6.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>
       <li><img src="images/gallery7.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li>

      </ul>
     </div>

Answer 1

As I understand it, your issue is that you want each entry on the page to have different regions on each slide that are hot, right?

Each <li> entry doesn't necessarily have to be an image. It just has to be a uniform rectangle. You can put anything you want into that rectangle: complex DIVs with anchors and links and whatever else you want.

An easy trick here would be add empty <a href="...">'s after your IMG tags and then use CSS to make them display:block, position:absolute, and set the top, left, height, width, and z-index to position these otherwise invisible anchors above the relevant parts of your images.