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

slideshow with scriptaculous
 
karoty
Jr. Member
 
Total Posts:  2
Joined:  2009-08-27
 

thank you for your posts.
demande taux pret personnel en ligne credit simulation Faire un pret immobilier en ligne avec un bon creditdemande taux pret personnel en ligne credit simulation

 
Magento Community Magento Community
Magento Community
Magento Community
 
George_Spain
Jr. Member
 
Total Posts:  5
Joined:  2009-07-03
 
MageStore - 17 August 2009 10:59 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?

Has anyone done this? I´m very interested on this.

Thank you from spain.

george

 
Magento Community Magento Community
Magento Community
Magento Community
 
MageClub
Guru
 
Avatar
Total Posts:  386
Joined:  2009-07-25
India
 

Can we add a jQuery Image Slideshow in Magento ??

 
Magento Community Magento Community
Magento Community
Magento Community
 
Randolf
Jr. Member
 
Total Posts:  2
Joined:  2009-10-15
 

Thank you very much, I actually got this working! I’ve done the same for others in other areas, and will continue to, but it’s very nice to get the help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  889
Joined:  2008-04-28
London, UK
 

This is absolutely fantastic - and so easy to add to the home page.

Thank you so much to all of you who have contributed to this.

I have managed to add the “simple version - but I can not get new products to show at all (code with PHP).

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
khan2ims
Jr. Member
 
Total Posts:  4
Joined:  2009-04-11
Ahmednagar, Maharashtra, India
 

Hi,

I know, I must be doing something silly. I am using Magento ver. 1.3.2.4 I have pasted the javascript and php code in a page. When I save the page,instead of the slideshow I see this code

load($cat_id); $products $category->getProductCollection()->addCategoryFilter($category)->addAttributeToSelect('*'); $products $category->getProductCollection()->addCategoryFilter($category)->addAttributeToSelect('*'); $cnt 1?> foreach ($products as $_product ): if ($_product['type_id'== 'configurable'{ $pCount++; endforeach; ?>

Can you please point to me, where I am getting wrong? Thanks a lot!

tegansnyder - 23 July 2009 11:52 AM

Ok I took Igor’s code and incorporated it into mine.

<?php         
$pCount 
10//Number of products in your category - would be nice to have it dynamically set
$zIndex 0;
$displayMode "block";
$cat_id 9// set desired category id
$category Mage::getModel('catalog/category')->load($cat_id);
$products $category->getProductCollection()->addCategoryFilter($category)->addAttributeToSelect('*');
$cnt 1;
?>
                           
                           
<script type="text/javascript">
        
start_slideshow(1<?php echo $pCount;?>3000);

        var 
currentSlide 1;

        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_frame
                    
currentSlide frame;
                
else {
                    frame 
frame 1
                    
currentSlide frame;
                
}
                
                Effect
.Appear('slide' frame{ duration1.0 });
                
                if (
delay == 1000{
                    delay 
3000
                
}
                
                id 
setTimeout(switch_slides(framestart_frameend_framedelay), delay);
            
})
        
}

        
function stop_slideshow() {
            clearTimeout
(id);
        
}
        
        
function next_slide() {
            
            clearTimeout
(id);

            
Effect.Fade('slide' currentSlide{ duration1.0 });
            
            if (
currentSlide == <?php echo $pCount;?>{
                currentSlide 
0;
            
}
            
            currentSlide 
currentSlide 1;
            
Effect.Appear('slide' currentSlide{ duration1.0 });
            
id setTimeout(switch_slides(currentSlidecurrentSlidecurrentSlidedelay), delay);
        
}
        
        
function previous_slide() {
            
            clearTimeout
(id);
            
            if (
currentSlide == 0{
                currentSlide 
1;
            
else {
              Effect
.Fade('slide' currentSlide{ duration1.0 });
              
              
currentSlide currentSlide 1;
              
Effect.Appear('slide' currentSlide{ duration1.0 });
              
id setTimeout(switch_slides(currentSlidecurrentSlidecurrentSlidedelay), delay);
            
}
        }
        
    </script>

<div id="introhomepage" style="position: relative;" align="center" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 4, 3000)">

<?php 
foreach ($products as $_product ): 
    if (
$cnt == 1
        $zIndex 
$pCount;    
        
$displayMode "block";
    
else {
        $zIndex 
$pCount $cnt;
        
$displayMode "none";
    
}
?>
ec
<div id="slide<?php echo $cnt; ?>" class="slide" style="position: absolute; top: 0pt; left: 20pt; display: <?php echo $displayMode;?>; z-index: <?php echo $zIndex;?>; opacity: 1;">
    <
a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(151, 151); ?>" width="151" height="151" title="<?php echo $_product->getName() ?>" alt="<?php echo $_product->getName() ?>" /></a>
</
a></div>


<?php 
    $cnt
++;
endforeach; 
?>

</div>

It seems to pull all the products from my category labeled “New Products”. But the problem is it somehow pulling 56 products instead of the 10 that are in the actually category on the front end. Any ideas on how to get it just to pull the products that are visible on the front end for this category?
 
Magento Community Magento Community
Magento Community
Magento Community
 
Pink Web Fish
Jr. Member
 
Total Posts:  7
Joined:  2009-04-17
 

Hello,

Thanks for the excellent bit of code. I am trying to place this into the “Right Cloumn” of my site but it is not playing ball. Is there any way of doing this?

Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ehben
Jr. Member
 
Total Posts:  6
Joined:  2010-05-06
 

up - anyone ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pink Web Fish
Jr. Member
 
Total Posts:  7
Joined:  2009-04-17
 

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);
 
Magento Community Magento Community
Magento Community
Magento Community
 
Pink Web Fish
Jr. Member
 
Total Posts:  7
Joined:  2009-04-17
 

So now you have a static block that shows up nowhere......great!!

To allow it to show you need to do one of the following:

To show on individual pages:

Go to the CMS page you want it to be added to --> Custom Design --> Layout Update XML

<reference name="right">

  <
block type="cms/block" name="featured">
   <
action method="setBlockId"><block_id>featured</block_id></action>
</
block>
</
reference>

Save and then go to the CMS page it should now be showing.

To show on all pages

app/design/frontend/PACKAGE/YOUR THEME/layout/catalog.xml

Find the “default” tags around line 45. Look a little further on (around line 60) and you will see the following:

<reference name="right">
            <
block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
            <!--
            <
block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
            -->
        </
reference>

Now add the following between the reference tags:

<block type="cms/block" name="featured"> <action method="setBlockId"><block_id>featured</block_id></action></block>

Hopes this helps grin

 
Magento Community Magento Community
Magento Community
Magento Community
 
aramsore
Jr. Member
 
Total Posts:  27
Joined:  2009-12-18
 
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);

Hi,

Where should I put image files?  and how should I put URL in the image location?
Should i do like this? “ http://www.xxxxx.com/media/..../image.jpg

Thanks,

JC

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pink Web Fish
Jr. Member
 
Total Posts:  7
Joined:  2009-04-17
 

Hello Aramsore,

If, for instance, your image was PIC1.jpg in your “skin/frontend/default/default/images/media” directory then your code should be:

<img border='0' src='{{skin url='images/media/PIC1.jpg'}}' />

Hope this helps but just ask if you need anything more.

Regards,

Stu

 
Magento Community Magento Community
Magento Community
Magento Community
 
aramsore
Jr. Member
 
Total Posts:  27
Joined:  2009-12-18
 
AngelsMeadow - 09 June 2010 12:22 PM

Hello Aramsore,

If, for instance, your image was PIC1.jpg in your “skin/frontend/default/default/images/media” directory then your code should be:

<img border='0' src='{{skin url='images/media/PIC1.jpg'}}' />

Hope this helps but just ask if you need anything more.

Regards,

Stu

Thanks! Stu.

Just quick question.
It works well but it takes some time to load the first image.  Is there any way to load images quickly? for the few seconds, i don’t see any images.

Thanks stu again!

JC

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pink Web Fish
Jr. Member
 
Total Posts:  7
Joined:  2009-04-17
 

JC,

I have noticed this “problem” as well. I have not worked anything out yet. I am pretty sure it is something to do with the delay that is set but if you change it then you images scroll through too quickly. Its as if the first image needs to be removed from this delay somehow......still working on it though. Maybe someone else here knows a solution???

Stu

 
Magento Community Magento Community
Magento Community
Magento Community
 
ivansao
Jr. Member
 
Total Posts:  13
Joined:  2009-03-16
 

Awesome, thanks a lot for this....

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