Help with Fadein Fadeout Slideshow

[ivan20012]

Hi — I asked this question earlier, but I think that I posted it in the wrong subforum. I'm hoping that someone can help me with the changes I would have to make to insert a fade-in/fade-out slideshow on the product page (not the home page at this point; at this point, just the product page). Right now, I have one image of the product, and I would like there to be several different images of that product that that fade in and fade out on the product page. I’m not talking about the thickbox that appears when you click on the image itself. Instead, when you open to the product page and see the large image of the product, I would like that image to be several images that fade in and out. I was able to achieve this on my non-prestashop homepage by using jquery. The js download and example of what it looks like is available here (http://tobia.github.com/CrossSlide/). I had the jquery.cross-slide.min.js file located in the same folder as my images, and my html page had the following script mark-up at the top:

 [removed][removed]
 [removed][removed]
 [removed]
$(function() {
$('#slideshow').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'productimage.jpg' },
{ src: 'damaris5.jpg' },
{ src: 'thais5.JPG' },
{ src: 'danielle.jpg' },
{ src: 'thais1.jpg' },
{ src: 'thais6.JPG' },
{ src: 'thais7.JPG' },
{ src: 'thais2.JPG' },
{ src: 'danielle1.jpg' },
])
});
 [removed]

I don’t know in which prestashop folder I would place the jquery.cross-slide.min.js file. I also don’t know which file (and where in that file), I would add the code above (product.tpl? product.php?) Any help would be very much appreciated. I have looked around on the forum, and the only slideshows I have found are on the home page . .

[rocky]

Put the Javascript in the js directory in your theme's directory. If the slideshow is just on the homepage, it may be best to put the code at the top of index.tpl. If it's on multiple pages, header.tpl would be best. Add the following code:

<script type="text/javascript" src="{$js_dir}jquery.cross-slide.min.js"></script>

And the code you wrote above.

[ivan20012]

Thank you for the code. I don't need a slider for the home page, I already got a homepage slider from the free Black and White themes. I need to put the cross slide for the 3-4 images on the product page. This is the product page of the theme that I downloaded: http://ipno.tik.free.fr/blackwhite/product.php?id_product=17. I can see that javascript controls the arrows and switching of different pictures. So I wanted to know where I could put the code so that those pictures move by slider, instead of the customer manually clicking on each image. Given this, in which file should I place the code? Btw, this guy asked the same thing, but it looks like no one answered http://www.prestashop.com/forums/viewthread/59685/general_discussion/automatic_slideshow_for_product_images

[rocky]

In that case, it would be best to put that line in product.tpl.

[ivan20012]

Thanks for the suggestion, Rocky. I've been working feverishly on your suggestion and this is what I came up with. I hope you can help me by offering a small correction to what I have done below.

As soon as I opened the product.tpl, I was immediately overwhelmed and very worried that I could possibly throw everything off. It occurred to me that I was not using the product categories module. So I could make a few, small changes in product.tpl, and make most of the changes in productcategories.tpl. I just put dummy products in each category, removed the links, and put the pics on each of the dummy products that I wanted to appear on my product page. I copied the code from the editorlial.tpl that had the slider and inserted it into the productscategory.tpl. I also made a few slight adjustments in the global.css.

This all worked EXCEPT that only the first two images in each category appear, as opposed to all of the images in the category . . .The following is the code from the productscategory.tpl, supplemented by the slider. Can you tell me what I did wrong?

>
{if count($categoryProducts) > 0}
[removed]var middle = {$middlePosition};[removed]
[removed][removed]
[removed][removed]
{*</pre>
<ul>
{l s='In the same category' mod='productscategory'}
</ul>*}<br><div>
{*{if count($categoryProducts) > 5}{l s='Previous' mod='productscategory'}{/if}*}
{literal}
[removed]
       $(window).load(function()
       {
           init_slideshow()
       })

       init_slideshow = function()
       {
           $('#home_slides').cycle({
               fx:'fade',
               timeout:8000,
               pager:'#slide_navigation',
               after:update_slide_caption,
               before:fade_slide_caption
           })
       }

       fade_slide_caption = function(next, previous)
       {
           caption_container = $('#project_caption')
           caption_container.fadeOut('fast')
       }

       update_slide_caption = function(next, previous)
       {
           caption_container = $('#project_caption')

           caption = $('span.slide_caption', previous)
           caption_container.fadeIn('fast')
           caption_container.html(caption.html())

       }
[removed]
{/literal}

     {foreach from=$categoryProducts item='categoryProduct' name=categoryProduct}
{* 5}style="width: {math equation="width * nbImages" width=107 nbImages=$categoryProducts|@count}px"{/if}>*}

 
getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'large')}" alt="{$categoryProduct.name|htmlspecialchars}" />

     {/foreach}


{/if}
</div>

I've noticed that a few people have asked about having rotating pictures on the product page. Once I have solved the problem of only two pictures showing (assuming that you don't tell me that what I have done is totally insane), I'll create a new thread and post a detailed description of all codes for all of the above in case anyone wants to look it over. Obviously, I'm a complete novice at this, but I did at least manage to create a slider on the product page, and fades two images. . .. But in the meantime, any guidance on how to get all of the images in each category to load would be deeply appreciated.