Magento

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

MageStore - 17 August 2009 11: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

Can we add a jQuery Image Slideshow in Magento ??

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.

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!

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

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

tegansnyder - 23 July 2009 12:52 PM

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_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; 
                    currentSlide = frame;
                } else {
                    frame = frame + 1; 
                    currentSlide = frame;
                }
                
                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);
        }
        
        function next_slide() {
            
            clearTimeout(id);

            Effect.Fade('slide' + currentSlide, { duration: 1.0 });
            
            if (currentSlide == <?php echo $pCount;?>) {
                currentSlide = 0;
            }
            
            currentSlide = currentSlide + 1;
            Effect.Appear('slide' + currentSlide, { duration: 1.0 });
            id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
        }
        
        function previous_slide() {
            
            clearTimeout(id);
            
            if (currentSlide == 0) {
                currentSlide = 1;
            } else {
              Effect.Fade('slide' + currentSlide, { duration: 1.0 });
              
              currentSlide = currentSlide - 1;
              Effect.Appear('slide' + currentSlide, { duration: 1.0 });
              id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), 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?

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.

up - anyone ?

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:

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:

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

From:

To:

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

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:

Now add the following between the reference tags:

Hopes this helps

AngelsMeadow - 02 June 2010 01: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(1, 6, 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;">
<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(1, 6, 3000);

To:

<script type="text/javascript">
        start_slideshow(1, 8, 3000);

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

Hello Aramsore,

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

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

Regards,

Stu

AngelsMeadow - 09 June 2010 01: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

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

Awesome, thanks a lot for this....