Magento Forum

   
Lodger footwear slideshow
 
alx
Jr. Member
 
Total Posts:  8
Joined:  2009-01-22
 

Hi everybody !
Does somenone knows how to make this wonderfull big slideshow :
http://www.lodgerfootwear.com/
I’ve found some informations in the code, but i don’t really know how to begin :

<script type="text/javascript" >
// <![CDATA[
var slideImages=[]slideNames [],slideUrls [];
    
slideImages.push('/media/Lodger-nyc.jpg');
    
slideNames.push('New York - Lodger is coming to New York February 24th & 25th.');
    
slideUrls.push('http://www.lodgerfootwear.com/experience/custom_service/international_events/');
    
slideImages.push('/media/SOM-200901-GB-Feature.jpg');
    
slideNames.push('DESERT BOOT - ENGLISH SHOE OF THE MONTH: JANUARY 2009');
    
slideUrls.push('/som/current/english');
    
slideImages.push('/media/lodger-boston-200902.jpg');
    
slideNames.push('Boston - Lodger is coming to Boston February 26th & 27th.');
    
slideUrls.push('http://www.lodgerfootwear.com/experience/custom_service/international_events/');
    
slideImages.push('/media/SOM-200901-IT-Feature.jpg');
    
slideNames.push('SLIP ON - ITALIAN SHOE OF THE MONTH: JANUARY 2009');
    
slideUrls.push('/som/current/italian');
// ]]>
</script>

<script type="text/javascript" src="/js/index.php?c=auto&amp;f=page/home.index.js&amp;1"></script>
<div id="mktg-images">

    <
img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/btn-scrollNext-mktgImg-off.png" width="21" height="19" alt="http://www.lodgerfootwear.com/skin/frontend/default/default/Next Lodger Featured Shoe" id="scrollNext-mktgImg" class="pngFixMe" />
    
    <
div id="mktgImgs-scroll" class="clearfix">
        <
div id="mktgImg-0" class="mktgImg-holder">
            <
div class="relative">
                <
img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" width="861" height="360" alt="" />
            </
div>
        </
div>
        
        <
div id="mktgImg-1" class="mktgImg-holder active">
            <
div class="relative">

                <
a href="#" ><img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" width="861" height="360" alt="" class="mktgImg" /></a>
                <
a href="#" ><span id="mktgImg-caption-1" class="mktgImg-caption"></span></a>
            </
div>
        </
div>
        <
div id="mktgImg-2" class="mktgImg-holder">
            <
div class="relative">
                <
div class="img-screens"><img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" width="861" height="360" alt=""  /></div>
                <
a href="#" ><img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" style="width:861px;height:360px;" alt="" class="mktgImg" /></a>
                <
a href="#" ><span id="mktgImg-caption-2" class="mktgImg-caption"></span></a>

            </
div>
        </
div>
        <
div id="mktgImg-3" class="mktgImg-holder">
            <
div class="relative">
                <
div class="img-screens"><img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" width="861" height="360" alt=""  /></div>
                <
a href="#" ><img src="http://www.lodgerfootwear.com/skin/frontend/default/lodger/images/spacer.gif" style="width:861px;height:360px;" alt="" class="mktgImg" /></a>
                <
a href="#" ><span id="mktgImg-caption-3" class="mktgImg-caption"></span></a>
            </
div>
        </
div>

        <
script type="text/javascript" >
            
//jQuery(function(){
                
jQuery('#mktgImg-1 img.mktgImg').attr('src',slideImages[0]);
                
jQuery('#mktgImg-caption-1')[0].innerHTML=slideNames[0];
                
jQuery('#mktgImg-1 .relative a').attr('href',slideUrls[0]);
                
                
jQuery('#mktgImg-2 img.mktgImg').attr('src',slideImages[1]);
                
jQuery('#mktgImg-caption-2')[0].innerHTML=slideNames[1];
                
                
jQuery('#mktgImg-3 img.mktgImg').attr('src',slideImages[2]);
                
jQuery('#mktgImg-caption-3')[0].innerHTML=slideNames[2];
            
//    });
        
</script>
Someone to help ?
Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
MA_19
Member
 
Total Posts:  41
Joined:  2009-01-21
 

Its a jQuery silder. take a look at this page

http://jqueryfordesigners.com/slider-gallery/

Matt

 
Magento Community Magento Community
Magento Community
Magento Community
 
alx
Jr. Member
 
Total Posts:  8
Joined:  2009-01-22
 

Thx MA !

 
Magento Community Magento Community
Magento Community
Magento Community
 
alx
Jr. Member
 
Total Posts:  8
Joined:  2009-01-22
 

This one seems cool also, but doesn’t work when i download the plugin…
http://www.5bosses.com/examples/agile_carousel/simple_example/carousel.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top