Magento

eCommerce Software for Online Growth

Magento Forum

From setting up your store to managing your products, pages and promotions to generating detailed reports, the Magento User Guide empowers the user to utilize the platform for all of its vast capacity.
Available in eBook and Print formats – Download Now!!!
   
Page 1 of 4
slideshow with scriptaculous
 
pldtm
Sr. Member
 
Avatar
Total Posts:  79
Joined:  2007-09-04
Bordeaux, France
 

hi ,
As magento is bundled with scriptaculous, i decided to try to add a slideshow on home in cms page, so i added this code on homepage. With firebug i see javascript is working but my images doesn’t show on home page.

<h1>Home Page</h1>
<
script type="text/javascript">
    
    
start_slideshow(132000);
    
    function 
start_slideshow(start_frameend_framedelay{
        setTimeout
(switch_slides(start_frame,start_frame,end_framedelay), delay);
    
}
                            
    
function switch_slides(framestart_frameend_framedelay{
        
return (function() {
            Effect
.Fade('slide' frame);
            if (
frame == end_frame{ frame start_frameelse { frame frame 1}
            setTimeout
("Effect.Appear('slide" frame "');"850);
            
setTimeout(switch_slides(framestart_frameend_framedelay), delay 850);
        
})
    
}

</script>
<div id="introhomepage" height300px;">
<div id="
slide1" class="slide"><div><a href='http://localhost/shop/tv/37-pouces/sharp-37.html'><img border='0' src='{{skin url='images/media/slide1.gif'}}' /></a></div></div>
<div id="
slide2" class="slide"><div><a href='http://localhost/shop/tv/37-pouces/sharp-37.html'><img border='0' src='{{skin url='images/media/slide2.gif'}}' /></a></div></div>
<div id="
slide3" class="slide"><div><a href='http://localhost/shop/tv/37-pouces/sharp-37.html'><img border='0' src='{{skin url='images/media/slide3.gif'}}' /></a></div></div>
</div>

my 3 .gif are stored in images folder
what’s wrong with that.

thanks for your help

phil

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Sr. Member
 
Avatar
Total Posts:  79
Joined:  2007-09-04
Bordeaux, France
 

sorry it’s working, i changed my 3 .gif from image to media folder and now it’s nearly working.

On first load i have the 3 images on my screen.

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Sr. Member
 
Avatar
Total Posts:  79
Joined:  2007-09-04
Bordeaux, France
 

all is working,

solution found

phil

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
TheHuntingDynasty
Jr. Member
 
Total Posts:  25
Joined:  2008-06-27
 

Cute code - what was the solution to stop all three images showing up on the first load?
I’d love to implement your fix. Ta!

http://www.reduceyourenergyuse.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Sr. Member
 
Avatar
Total Posts:  79
Joined:  2007-09-04
Bordeaux, France
 

you have to add this : overflow:hidden to the first Div after the height

 Signature 

PL_DTM cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
neurone
Jr. Member
 
Total Posts:  24
Joined:  2007-08-31
Paris - France
 

Still have the problem of the 3 element coming on the first start ... any idea ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lemax
Sr. Member
 
Total Posts:  253
Joined:  2008-04-03
La Rochelle, France
 

Utilise ça :
</script>
<div style="width:715px ; height:416px ; overflow: hidden">
<div id="slide1" class="slide"><div><a href=’http://localhost/shop/tv/37-pouces/sharp-37.html’><img border=’0’ src=’{{skin url=’slideshow/images_en/slide1.gif’}}’ /></a></div></div>
<div id="slide2" class="slide"><div><a href=’http://localhost/shop/tv/37-pouces/sharp-37.html’><img border=’0’ src=’{{skin url=’slideshow/images_en/slide2.gif’}}’ /></a></div></div>
<div id="slide3" class="slide"><div><a href=’http://localhost/shop/tv/37-pouces/sharp-37.html’><img border=’0’ src=’{{skin url=’slideshow/images_en/slide3.gif’}}’ /></a></div></div>
</div>

 Signature 

Nautisports.com : Vêtements et accessoires pour les sports nautiques.
Ambient Lounge : Fauteuils lounge pour l’intérieur et l’extérieur.

 
Magento Community Magento Community
Magento Community
Magento Community
 
bort911
Jr. Member
 
Total Posts:  2
Joined:  2008-10-08
 

This is great. We need a little bit of help on it. We would like to also switch the slides by clicking on part of the image and have them linked. Any help with that? Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
bort911
Jr. Member
 
Total Posts:  2
Joined:  2008-10-08
 

Additionally Pause the slides?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lemax
Sr. Member
 
Total Posts:  253
Joined:  2008-04-03
La Rochelle, France
 

You should lokk at this wiki and use a different script:
http://www.magentocommerce.com/wiki/how_to/how_to_add_jw_image_gallery_xml-flash

Max

 Signature 

Nautisports.com : Vêtements et accessoires pour les sports nautiques.
Ambient Lounge : Fauteuils lounge pour l’intérieur et l’extérieur.

 
Magento Community Magento Community
Magento Community
Magento Community
 
OSdave
Jr. Member
 
Total Posts:  21
Joined:  2007-09-01
Granada, Spain
 

hi all,
Thanks for this piece of code, it looks really nice.
I have changed it a bit to pause the slideshow when you mouse over and also I’ve used the z-index property for a nicer fade out/in.
Here it is, if it helps someone:

<script type="text/javascript">
        
start_slideshow(133000);

        function 
start_slideshow(start_frameend_framedelay{
            id 
setTimeout(switch_slides(start_frame,start_frame,end_framedelay), delay);
        
}

        
function switch_slides(framestart_frameend_framedelay{
            
return (function() {
                Effect
.Fade('slide' frame{ duration1.0 });
                if (
frame == end_frame{ frame start_frameelse { frame frame 1}
                Effect
.Appear('slide' frame{ duration1.0 });
                if (
delay == 1000{ delay 3000}
                id 
setTimeout(switch_slides(framestart_frameend_framedelay), delay);
            
})
        
}

        
function stop_slideshow() {
            clearTimeout
(id);
        
}
    </script>
<div id="introhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)">
<
div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><a href='http://www.yourdomain.com/path/to/webpage.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
<
div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
<
div id="slide3" class="slide"style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
</
div>
cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
zep007
Sr. Member
 
Avatar
Total Posts:  123
Joined:  2008-05-15
Connecticut
 

Hey,

Thanks for posting this,Works Great

 
Magento Community Magento Community
Magento Community
Magento Community
 
sriforum
Jr. Member
 
Total Posts:  5
Joined:  2008-10-23
 
OSdave - 19 December 2008 04:02 AM

hi all,
Thanks for this piece of code, it looks really nice.
I have changed it a bit to pause the slideshow when you mouse over and also I’ve used the z-index property for a nicer fade out/in.
Here it is, if it helps someone
cheers

Thanks a lot for your help to put the code up.

 
Magento Community Magento Community
Magento Community
Magento Community
 
burak özDEMİR
Jr. Member
 
Total Posts:  20
Joined:  2008-08-08
 

Thank you so much. Can you tell us which parameter defines the duration of the appearance?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lbwd
Jr. Member
 
Total Posts:  28
Joined:  2008-06-28
 
lemax - 15 October 2008 12:01 AM

You should lokk at this wiki and use a different script:
http://www.magentocommerce.com/wiki/how_to/how_to_add_jw_image_gallery_xml-flash

Max

Good point; however, the script used therein is for non-commercial use only.  You have to read the license.

 
Magento Community Magento Community
Magento Community
Magento Community
 
OSdave
Jr. Member
 
Total Posts:  21
Joined:  2007-09-01
Granada, Spain
 
burak özDEMİR - 12 January 2009 10:09 AM

Thank you so much. Can you tell us which parameter defines the duration of the appearance?

i suppose this is delay, but i’m not quite sure I understand your question. Tell me if you need more help.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 4
 
© Copyright 2010 Varien. Magento, eCommerce software, is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
177522 users|1160 users currently online|277045 forum posts