Magento - slideshow with scriptaculous - HTML, XHTML, CSS, Design Questions - eCommerce Software for Growth

Skip to site navigation »
Skip to main content »
Skip to footer content »

Login

Login:

Password:

Remember password
Show my name in the online users list

Forgot password?
Register
Job Board

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!!!

slideshow with scriptaculous

pldtm Total Posts: 79 Joined: 2007-09-04 Bordeaux, France Ignore user	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(1, 3, 2000); function start_slideshow(start_frame, end_frame, delay) { setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); } function switch_slides(frame, start_frame, end_frame, delay) { return (function() { Effect.Fade('slide' + frame); if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; } setTimeout("Effect.Appear('slide" + frame + "');", 850); setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850); }) } </script> <div id="introhomepage" height: 300px;"> <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
	Posted: August 13 2008 \| top

pldtm Total Posts: 79 Joined: 2007-09-04 Bordeaux, France Ignore user	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
	Posted: August 13 2008 \| top \| # 1

pldtm Total Posts: 79 Joined: 2007-09-04 Bordeaux, France Ignore user	all is working, solution found phil Signature PL_DTM
	Posted: August 13 2008 \| top \| # 2

TheHuntingDynasty Total Posts: 25 Joined: 2008-06-27 Ignore user	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
	Posted: September 15 2008 \| top \| # 3

pldtm Total Posts: 79 Joined: 2007-09-04 Bordeaux, France Ignore user	you have to add this : overflow:hidden to the first Div after the height Signature PL_DTM
	Posted: September 15 2008 \| top \| # 4

neurone Total Posts: 24 Joined: 2007-08-31 Paris - France Ignore user	Still have the problem of the 3 element coming on the first start ... any idea ?
	Posted: October 14 2008 \| top \| # 5

lemax Total Posts: 253 Joined: 2008-04-03 La Rochelle, France Ignore user	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.
	Posted: October 14 2008 \| top \| # 6

bort911 Total Posts: 2 Joined: 2008-10-08 Ignore user	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.
	Posted: October 14 2008 \| top \| # 7

bort911 Total Posts: 2 Joined: 2008-10-08 Ignore user	Additionally Pause the slides?
	Posted: October 15 2008 \| top \| # 8

lemax Total Posts: 253 Joined: 2008-04-03 La Rochelle, France Ignore user	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.
	Posted: October 15 2008 \| top \| # 9

OSdave Total Posts: 21 Joined: 2007-09-01 Granada, Spain Ignore user	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(1, 3, 3000); function start_slideshow(start_frame, end_frame, delay) { id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); } function switch_slides(frame, start_frame, end_frame, delay) { return (function() { Effect.Fade('slide' + frame, { duration: 1.0 }); if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; } Effect.Appear('slide' + frame, { duration: 1.0 }); if (delay == 1000) { delay = 3000; } id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), 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
	Posted: December 19 2008 \| top \| # 10

zep007 Total Posts: 123 Joined: 2008-05-15 Connecticut Ignore user	Hey, Thanks for posting this,Works Great
	Posted: January 4 2009 \| top \| # 11

sriforum Total Posts: 5 Joined: 2008-10-23 Ignore user	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.
	Posted: January 8 2009 \| top \| # 12

burak özDEMİR Total Posts: 20 Joined: 2008-08-08 Ignore user	Thank you so much. Can you tell us which parameter defines the duration of the appearance?
	Posted: January 12 2009 \| top \| # 13

lbwd Total Posts: 28 Joined: 2008-06-28 Ignore user	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.
	Posted: January 12 2009 \| top \| # 14

OSdave Total Posts: 21 Joined: 2007-09-01 Granada, Spain Ignore user	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.
	Posted: January 13 2009 \| top \| # 15

Magento Community

Magento Community

Back to top

moving things around on the store front???

New Products Block Attributes, Changes, and Problems!

© 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