Discussion on jQuery iNav - Products Showcasing Navigation


ninjascript does not currently provide support for this item.

60 comments found.

[eirehotspur SAYS : If you click the arrows the icons move over one at a time per click. I want it so that I can put 25 icons in and have 5 icons move over per click.]

I would also like to have the ability to do this. That way viewers can see all of the items more quickly and will be more likely to click the arrows.

I understand that this can be an interesting feature. Now i just need a little bit of time to improve it and implement some other things.

Thank you for your comment.

Hi, There is a problem adding iNav to my Magento’s home page. I have properly added and included all .js and .css files and I successfully created a static block using the HTML . When the page loads, if you look at the source code, all files and HTML are added. However, the iNav isn’t there. I have done this like a million times with other jQuery plugins and this is really strange. Could you please have a look at it and advise me ? www.micro-scooters.gr/test

No reply yet… Anyway, I just changed the URL : http://jtroump.com/micro/

Really sorry for the late answer. Do you solved it ?


Quick question – if I buy this can I change each image on hover over? I would like my images to start black & white then change to colour when the user hovers over them?


Well this is not a feature supported by the plugin. You can to implemented by yourself with a little bit of css and javascript :)

Hi ninjascript Is there a way to scroll more than one item at a time? Great work!

Well, not currentyl. I think that this can be a nice new feature.

Hi. I bought the plugin.Very nice. But seems does not work with Jquery 1.4.4. Do you have maybe plugin’s version or any fix for Jquery 1.4.4? Thank you.

Sorry, you need at least jquery 1.5. ( you can find the versions supported in sidebar: “Software Version” ).

Is anybody here using Jquery 1.4 with this plugin?

Sorry, you need at least jquery 1.5. ( you can find the versions supported in sidebar: “Software Version” )


We are having trouble setting up the menu with space between the images. When we try making ‘itemWidth’ larger than the image, the space between the images remains clickable. When we try padding, a white space shows between the images (rather than the background image).

The example that you show in your Live Preview is perfect.. There is space between the elephant and the monkey AND the background image is consistent. Is this example somewhere in the CSS?

Thanks for the great product!

Please excuse me for taking so long to answer. Still need help ?

Yes, we do still need an answer. We put the menu live with the space between the images remaining clickable. If we could fix that, it would be great. http://www.motivators.com/Promote-Wellness.html

Ok, try with this CSS in jquery.inav.css or in your custom css file:

my-inav .inav-slides ul li a {

margin: 0 auto; width: 256px; }

Let me know if this one helps you.

I where is that theme!!!???

hello, ? try to Ecommerce theme but it didn’t wok. you write Add .inav-theme-ecommerce class to inav main container.

but it not work, please can u give details. how can ? change theme

Uhm… do you have a live version ?

how can i set auto scroll as seen in demo ?

Hi, you need just to set to true the “carouselAutoScroll” parameter :)

thank you i found it , one more question i set image size 220×192px but images stick each other , i want adjust space between images, where i can set it ? thanks…

Hi nijascript, is possible pause the autoscrol when the user click one image, as it do when is pressed next or prev buttons?


For the life of me I can’t get this to work. The instructions given seem adequate at first blush, but simply following them won’t get you functioning, for reasons no one south of a professional coder will be capable of diagnosing. I can’t fathom why it escapes vendors that with a little useful step-by-step documentation, actually stepping you through the arcane bits instead of just, say, referencing that you should “add something to a div,” their products would find many more buyers. It seems a problem endemic to the market.

Needless to say, if you set up your directories precisely like in the demo and upload the demo index.html, you’ll find it won’t work.

Hi, can you show me a live version of your installation?

Could you explain in detail:


Add .inav-theme-portfolio class to inav main container.”

Please give an example. Thx.


Nothing? Oh ninjascript?

Sorry for the delay in getting back to you but I didn’t noticed your messages. Let me check :)

Sorry for the incomplete example, i think that the tag was removed by the comment validation.
Replace this ( from your portfolio slide ):

<div class="inav-showcase.inav-theme-portfolio" id="my-inav" data-item-width="230" data-item-height="315">
With this:
<div class="inav-showcase inav-theme-portfolio" id="my-inav-2" data-item-width="230" data-item-height="315">

I have removed the dot "." in your class attribute, and changed your ID ( FYI you can't have two or more elements with same ID )

Your demo is not working for several reasons:
1. You are using the same ID for both jQuery iNavs
2. The class of the portfolio jQuery iNav is wrong. You have to remove the "." and replace it with a space.
3. The bullets in the right corner are showed cause your "typography.css:231".  Usually the list-style is applied to the UL rather than to the LI element. If you can't remove it, just add this to your stylesheet

.inav-showcase .inav-slides ul li { list-style: none; }

Replace your iNav call:
<script type="text/javascript">
        $( function()
            var $nav = $( '#my-inav' ).inav( {
                initEffect : 'fade',
                autoCenterMenu : true
            } );
        } );

<script type="text/javascript">
        $( function()
            var $nav = $( '#my-inav' ).inav( {
                initEffect : 'fade',
                autoCenterMenu : true
            } );

           var $nav2 = $( '#my-inav-2' ).inav( {
                initEffect : 'fade',
                autoCenterMenu : true
            } );
        } );

Sorry for the look of this comments, i've tried to apply a correct format but there is something weird in Envato comments..
Hope this helps.</div></div>

Thanks! I’ll try implementing this. Much appreciated.

no worries :)

This is great, thanks, but it would be great if any ajax call could be made on scroll, maybe we could load the rest of items via ajax… .

Hey @behz4d, thank for your comment. This is a nice feature that could be added in some next release.

Thanks :)

can the animation be changed to look like apple.com new website menu? Will this work with wordpress themes?

Sorry for the delay in getting back to you. 1. You can change the animations only if you change plugin’s code 2. It’s just a jQuery plugin, that means that this can work with WordPress but you have to generate the menu HTML code.

Friend made ??the purchase, but do not know to install. you can install for me?

We need help installing this. Can you message me and I can send you wp-admin access?