Posted 10 years ago
·
Author
This will allow you to add a simple product rotator to your homepage or product page. It will switch back and fourth between 2 divs containing clickable product icons. When you hover over one of the icons, the effect gets stopped until your cursor leaves the icons.
To use it on your homepage, all you have to do is paste the code somewhere on one of your panels. IMVU homepages already have Jquery installed so you wont need to include it. To use it on your product page, you might have to include Jquery, I am not sure.
To customize this, simply replace the links inside the divs with your own. You just need the link to your product and the link to the image icon. You can also change how fast it runs.
Live demo: http://jsfiddle.net/hVXBu/71/
Rotator:
The products:
To use it on your homepage, all you have to do is paste the code somewhere on one of your panels. IMVU homepages already have Jquery installed so you wont need to include it. To use it on your product page, you might have to include Jquery, I am not sure.
To customize this, simply replace the links inside the divs with your own. You just need the link to your product and the link to the image icon. You can also change how fast it runs.
Live demo: http://jsfiddle.net/hVXBu/71/
Rotator:
<script type="text/javascript">
$(document).ready(function() {
//Start the timer that fades the products in and out
//Change 1500 to whatever value you want (1500 = 1.5 seconds)
var rotator = setInterval(function() {rotate()}, 1500);
function rotate() {
if($('#products1').is(":visible")) {
$('#products1').fadeOut('fast', function() {
$('#products2').fadeIn('fast');
});
} else if($('#products2').is(":visible")) {
$('#products2').fadeOut('fast', function() {
$('#products1').fadeIn('fast');
});
}
}
$('img').hover(function() {
window.clearInterval(rotator);
}, function() {
rotator = setInterval(function() {rotate()}, 2000);
});
});
</script>The products:
<div id="products1">
<a href='http://www.imvu.com/shop/product.php?products_id=12098079' target='_blank'><img src='http://userimages04-akm.imvu.com/productdata/images_1efb997e657205d161633456228093e2.jpg'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=12093831' target='_blank'><img src='http://userimages05-akm.imvu.com/productdata/images_50d07ff1b8757943366efaf86507d142.jpg'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=12093806' target='_blank'><img src='http://userimages01-akm.imvu.com/productdata/images_ed156c1df262edb81a04a844f26cfa82.jpg'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=11350787' target='_blank'><img src='http://userimages04-akm.imvu.com/productdata/images_fc600c6ae9cfdca69c328c0e0f8afb42.gif'/></a>
</div>
<div id="products2">
<a href='http://www.imvu.com/shop/product.php?products_id=19552830' target='_blank'><img src='http://userimages02-akm.imvu.com/productdata/images_f76603b1a943f9ebd1a0b17b0d7be4f1.gif'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=4470416' target='_blank'><img src='http://userimages01-akm.imvu.com/productdata/images_4f1d59cb825fc41a39637a2e7b9d6de4.png'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=7214322' target='_blank'><img src='http://userimages01-akm.imvu.com/productdata/images_cfba11885dc233fff6b7b6111e0ccb17.gif'/></a>
<a href='http://www.imvu.com/shop/product.php?products_id=7214640' target='_blank'><img src='http://userimages01-akm.imvu.com/productdata/images_88449f2e30ac0672718a4e042a10cf0b.gif'/></a>
</div>