Magento Forum

   
slideshow with scriptaculous
 
camilo sanchez
Jr. Member
 
Total Posts:  13
Joined:  2008-11-21
Dominican Republic
 

ok, this is great! but what if i want to add “previous and next” buttons to the slideshow? i mean, it would be great if i could add three buttons: previous, next and pause. Any idea how can i do this? Thanks in advance

 
Magento Community Magento Community
Magento Community
Magento Community
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

To make previous and next buttons do something like this:

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

        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 == 3{
                currentSlide 
0
            }
            
            currentSlide 
currentSlide 1;
            
Effect.Appear('slide' currentSlide{ duration1.0 });
            
id setTimeout(switch_slides(currentSlidecurrentSlidecurrentSlidedelay), delay);
        
}
        
        
function previous_slide() {
            
            clearTimeout
(id);

            
Effect.Fade('slide' currentSlide{ duration1.0 });
            
            if (
currentSlide == 0{
                currentSlide 
1
            }
            
            currentSlide 
currentSlide 1;
            
Effect.Appear('slide' currentSlide{ duration1.0 });
            
id setTimeout(switch_slides(currentSlidecurrentSlidecurrentSlidedelay), delay);
        
}
        
    </script>

Then just add links:

<a href="#" onclick="next_slide()">Next Slide</a>
<
a href="#" onclick="previous_slide()">Previous Slide</a>

 
Magento Community Magento Community
Magento Community
Magento Community
 
camilo sanchez
Jr. Member
 
Total Posts:  13
Joined:  2008-11-21
Dominican Republic
 

@tegansnyder:
Wow! thank you!! let me see if it works and i’ll let you know. Thank you again!! i really appreciate this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

Here is my updated code and an example how how to do it:

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

        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 == 4{
                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>

Then here is the divs:

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

<
div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 20pt; display: block; z-index: 3; opacity: 1;">
<
a href='my-product.html'>
<
img border='0' src='http://www.mysite.com/skin/frontend/default/modern/images/new1.jpg' />
</
a></div>

<
div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 20pt; display: none; z-index: 2; opacity: 0;">
<
a href='my-product.html'>
<
img border='0' src='http://www.mysite.com/skin/frontend/default/modern/images/new2.jpg' />
</
a></div>

<
div id="slide3" class="slide"style="position: absolute; top: 0pt; left: 20pt; display: none; z-index: 1; opacity: 0;">
<
a href='my-product.html'>
<
img border='0' src='http://www.mysite.com/skin/frontend/default/modern/images/new3.jpg' />
</
a></div>

<
div id="slide4" class="slide"style="position: absolute; top: 0pt; left: 20pt; display: none; z-index: 1; opacity: 0;">
<
a href='my-product.html'>
<
img border='0' src='http://www.mysite.com/skin/frontend/default/modern/images/new4.jpg' />
</
a></div>

</
div>

Then add links:

<a href="#" onclick="next_slide()">Next Slide</a>
<
a href="#" onclick="previous_slide()">Previous Slide</a>

Does anybody have any ideas on how to pull products dynamically from a certain category?

I would like to display a slideshow of all the products in my “New” category. I just need to know how to pull all the thumbnails and the link to the product and I’m in business.

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
ikuzyk
Magento Team
 
Avatar
Total Posts:  60
Joined:  2007-08-09
Ternopil, Ukraine
 

<?php                        
$cat_id 
8// set desired category id
$category Mage::getModel('catalog/category')->load($cat_id);
$products $category->getProductCollection()->addCategoryFilter($category)->addAttributeToSelect('*');
?>
<?php 
foreach ( $products as $_product ): ?>
    
<a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" title="<?php echo $_product->getName() ?>" alt="<?php echo $_product->getName() ?>" /></a>
<?php endforeach; ?>

Hope this help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
keskese
Jr. Member
 
Total Posts:  4
Joined:  2009-07-19
 

Hi Guys

Next step is to add some details at the buttom of each product.
So there is no only a image but also inforamtion.

I saw something like it done in jQuery.

Is it possible here?

 
Magento Community Magento Community
Magento Community
Magento Community
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

Thank you very much Igor!

That is exactly what I’m looking for.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

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
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

I got it to work. It turns out the code Igor posted grabs all the products in a category. I just wanted to display the configurable products. I also updated the $pCount variable so it is now dynamically assigned the number of products in your category.

Here is the code!

<?php  
$pCount 
0;
$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;

foreach (
$products as $_product ): 
    if (
$_product['type_id'== 'configurable'{
        $pCount
++;
    
}
endforeach; 

?>
                           
                           
<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 (
$_product['type_id'== 'configurable'{
      
if ($cnt == 1
          $zIndex 
$pCount;    
          
$displayMode "block";
      
else {
          $zIndex 
$pCount $cnt;
          
$displayMode "none";
      
}
?>

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
keskese
Jr. Member
 
Total Posts:  4
Joined:  2009-07-19
 

Guys this is great and working!

BUT how to include/pull some information about each product which can be shown below or next to product thumbnail?

Like here:
http://smoothslideshow.jondesign.net/timed.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
tegansnyder
Member
 
Avatar
Total Posts:  48
Joined:  2008-10-23
Minneapolis, MN
 

If you want to get more information about the product to display underneath of the image I suggest you do a print of the products object.

For example if you place this code in a file ... let say test.php and upload it to your server it will give you a good example:

<?php
require_once("app/Mage.php");
Mage::app();

$cat_id 9// set desired category id
$category Mage::getModel('catalog/category')->load($cat_id);
$products $category->getProductCollection()->addCategoryFilter($category)->addAttributeToSelect('*');
$cnt 1;

foreach (
$products as $_product ): 
    if (
$_product['type_id'== 'configurable'{
        $pCount
++;
        
        
//UNCOMMENT THESE LINES TO SEE LIST OF ALL VARIABLES IN THE OBJECT
        //echo '<pre>';
        //print_r($_product);
        //echo '</pre>';
        //echo '<br>';
        
        
echo $_product['sku''<br>';
        echo 
$_product['price''<br>';
        echo 
$_product['name''<br>';
        echo 
$_product['short_description''<br><br>';
        
    
}
endforeach; 
?>

 
Magento Community Magento Community
Magento Community
Magento Community
 
keskese
Jr. Member
 
Total Posts:  4
Joined:  2009-07-19
 

That is great but to complicated for me.

I would like to see those divs from pre-php stage of this tread development to be displayed dynamically on the image.
Have a look on the link above.

There is a small grey line at the buttom of the picture with title and description. I would like to implement something like this into this code.
I am sure CSS have to be changed.

Here is another example of the idea I have in mind:

http://www.serie3.info/s3slider/demonstration.html

Please, have a look.

 
Magento Community Magento Community
Magento Community
Magento Community
 
madnessuy
Jr. Member
 
Total Posts:  1
Joined:  2009-02-27
 

OK, i’m tring to get this work.... but i cant.
Where do you put all this code? it doesnt work for me as a static block or cms page…
Can you give me a hand?

thanks in advance

tegansnyder - 23 July 2009 01:55 PM

I got it to work. It turns out the code Igor posted grabs all the products in a category. I just wanted to display the configurable products. I also updated the $pCount variable so it is now dynamically assigned the number of products in your category.

Here is the code!

<?php  
$pCount 
0;
$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;

foreach (
$products as $_product ): 
    if (
$_product['type_id'== 'configurable'{
        $pCount
++;
    
}
endforeach; 

?>
                           
                           
<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 (
$_product['type_id'== 'configurable'{
      
if ($cnt == 1
          $zIndex 
$pCount;    
          
$displayMode "block";
      
else {
          $zIndex 
$pCount $cnt;
          
$displayMode "none";
      
}
?>

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
magestore
Mentor
 
Avatar
Total Posts:  1013
Joined:  2009-08-07
Viet Nam
 

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?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sebtb
Sr. Member
 
Avatar
Total Posts:  196
Joined:  2008-12-28
 

i need such a slide for the product-images...how?^^

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