Magento Forum

   
Page 5 of 5
slideshow with scriptaculous
 
webhister1
Jr. Member
 
Total Posts:  2
Joined:  2010-06-19
 

@OSdave thanks a lot

 
Magento Community Magento Community
Magento Community
Magento Community
 
nabler
Sr. Member
 
Total Posts:  80
Joined:  2010-07-27
 
AngelsMeadow - 02 June 2010 12:15 PM

Hello ehben,

To put this code in your right column I used the following code. I only use it on my homepage so have not included it in catalouge.xml but this can be done pretty easily. PM me if you want any more help.

1) Create a static block.....admin --> CMS --> Static Blocks --> Add New Block

Block Title: featured
Identifier: featured
Status: Enabled
Code:

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

        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;">
<
div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide3" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide4" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide5" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide6" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

If you require any more than 6 “slides” you need to add the additional divs under the code e.g. for an additional 2 slides you would add:
<div id="slide7" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

<
div id="slide8" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 1; opacity: 0;"><a href="{{store direct_url="YOUR LINK HERE"}}"><img border='0' src='{{skin url='IMAGE LOCATION HERE'}}' /></a></div>

You will also need to change the following code at the top to allow it to show all 8!!!:

From:

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

To:

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

You awesome and totally rock n roll…
thnx very-very much for the perfect solved script.... cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
banukutlu
Jr. Member
 
Total Posts:  1
Joined:  2010-08-15
 
-

Hello, I like add number to select images. For example, I have 3 images to show, there will be 3 links named 1, 2, 3. Click on these links, a particular image is shown. Something like in this site:
http://kitedigital.co.uk/
Is it possible?

Hi, I´m very interested on this, too. Has anyone given this a shot? I would appreciate any help about the pagination.

Thanks

Banu

 
Magento Community Magento Community
Magento Community
Magento Community
 
wittyusername
Jr. Member
 
Total Posts:  12
Joined:  2010-09-22
 
banukutlu - 19 August 2010 02:53 PM

-
Hello, I like add number to select images. For example, I have 3 images to show, there will be 3 links named 1, 2, 3. Click on these links, a particular image is shown. Something like in this site:
http://kitedigital.co.uk/
Is it possible?

Hi, I´m very interested on this, too. Has anyone given this a shot? I would appreciate any help about the pagination.

Thanks

Banu

i cannot find anything anywhere about doing this, which stinks because in jquery it is super easy.

 
Magento Community Magento Community
Magento Community
Magento Community
 
endothorn
Jr. Member
 
Total Posts:  7
Joined:  2010-06-24
 

Is it possible to add multiple instances on one page?

 
Magento Community Magento Community
Magento Community
Magento Community
 
wolfmask
Jr. Member
 
Total Posts:  14
Joined:  2010-09-02
 

I was able to get this code to work great in the past. However since I upgraded magento I get an error when I try to put it back.

error :

Error 501: The server cannot complete the request because it encounters an error
Header values specify a configuration that is not implemented.

ModSecurity, web application firewall, possible secure attack prevention.

Any ideas what I can do?
thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
basbert
Jr. Member
 
Total Posts:  11
Joined:  2011-10-16
München
 

@ nabler: Great solution! Just the opacity of the first div we have to set to “1”, otherwise the first fade would be delayed.

Best regards!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 5 of 5