Simple product rotator 4 posts

OP Fri Jul 04, 2014 11:54 am
User avatar
Administrator
Legendary Family Member
  • Gender: Male
  • Posts: 6284
  • Joined: Jun, 2010
  • Advertisements: 45
  • Karma: 368
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:
Code
<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:
Code
<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>
Sat Jul 05, 2014 8:01 pm
User avatar
  • Gender: Female
  • Posts: 134
  • Joined: Jun, 2014
  • Karma: 0
seen a lot doing neat things with here coding and adding it to hp and products
Wed Jul 30, 2014 10:02 pm
User avatar
  • Gender: Male
  • Posts: 20
  • Joined: Mar, 2014
  • Karma: 0
Totally agree, like this mods for product page. Thanks

Works with GA and AP product?
OP Wed Jul 30, 2014 10:06 pm
User avatar
Administrator
Legendary Family Member
  • Gender: Male
  • Posts: 6284
  • Joined: Jun, 2010
  • Advertisements: 45
  • Karma: 368
Kraig88 wrote:
Totally agree, like this mods for product page. Thanks
Works with GA and AP product?


It will work with any product. You just have to put in the product page url and icon url.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT