[solved]how to add product image with effect

[Riya]

Hi,

I need to add some effect for my product images in all pages( Home page,category page, etc..)

i find out effect (adipoli jqery plugin )

I attached link and zip file for this ..

I am using prestashop 1.5 version

Adipoli-master.zip

Edited December 26, 2013 by Riya (see edit history)

[Radu]

as explained here:

http://cube3x.com/adipoli-jquery-image-hover-plugin/

 

you include in your theme header the adipoli js and css then you'll do something like:

<script>
$(document).ready(function() {
   $('#bigpic').adipoli();
});
</script>

where bigpic is the id of the image on product page. Feel free to add other classes/ids

[Riya]

how to make this effect to all page?

how to get product image id?

[Riya]

any ideaa???

[Radu]

Have you tried for the product page? Where did you get stuck?

[vekia]

there on adipoli plugin page is a instruction:

 

 

How To Use

Enabling image hover effect is very simple. Place the below references inside your head tag.

1

2

3

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

If you need image hover on an image with id ‘image1′, call adipoli plugin like this:

1

2

3

<script>

      $('#image1').adipoli();

</script>

Adding Options:

1

2

3

4

$('#image1').adipoli({

    'startEffect' : 'normal',

    'hoverEffect' : 'popout'

});

 

just follow it,

instead of $('#image1') use $('img')

[Riya]

&nbsp;

there on adipoli plugin page is a instruction:

&nbsp;

just follow it,

instead of $('#image1') use $('img')

& thank you for your quick reply..I am sorry its not work .no effects in my product_list.tpl Edited December 10, 2013 by Riya (see edit history)

[vekia]

how you did exactly?

what code and where you add?

[Riya]

how you did exactly?

what code and where you add?

just add below things to header.tpl

 

 

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

 

 

 

and also added

 

$('img').adipoli({

    'startEffect' : 'normal',

    'hoverEffect' : 'popout'

});

 

 

in product_list.tpl

 

 

No effects ....

[vekia]

if you use code with brackets you have to use {literal} tags

 

{literal}

$('img').adipoli({

    'startEffect' : 'normal',

    'hoverEffect' : 'popout'

});

{/literal}

 

moreover, it will be much better if you will add this code in document ready function

[Riya]

Working  thanks...

[vekia]

thank you for confirmation that it works.

may i ask for something? 

you use only

{literal}
$('img').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});
{/literal}

or 

{literal}
$( document ).ready(function() {
$('img').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
});
{/literal}

[Riya]

{literal}
$('img').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
{/literal}