Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 5
slideshow with scriptaculous
 
pldtm
Sr. Member
 
Avatar
Total Posts:  82
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

 
Magento Community Magento Community
Magento Community
Magento Community
 
pldtm
Sr. Member
 
Avatar
Total Posts:  82
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.

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

all is working,

solution found

phil

 
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:  82
Joined:  2007-09-04
Bordeaux, France
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
neurone
Member
 
Total Posts:  33
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
Guru
 
Total Posts:  318
Joined:  2008-04-03
Nantes, 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>

 
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
Guru
 
Total Posts:  318
Joined:  2008-04-03
Nantes, 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

 
Magento Community Magento Community
Magento Community
Magento Community
 
OSdave
Member
 
Total Posts:  62
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:  131
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 03: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:  26
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 - 14 October 2008 11:01 PM

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
Member
 
Total Posts:  62
Joined:  2007-09-01
Granada, Spain
 
burak özDEMİR - 12 January 2009 09: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 5