Simple product rotator

DataMine
by DataMine · 4 posts
9 years ago in Javascript
Posted 9 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:
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>
Posted 9 years ago
seen a lot doing neat things with here coding and adding it to hp and products
Posted 9 years ago
Totally agree, like this mods for product page. Thanks

Works with GA and AP product?
Posted 9 years ago · Author
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
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts