Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Re-arrange Showcase Gallery


I'm testing out a new showcase layout where I'm heavily customising the item page. I'd like to have the main gallery image and carousel displayed prominently at the start of the showcase entry. I can edit the main item template to place "<xen:include template="nflj_showcase_item_image_gallery" />" wherever I'd like, but I can't seem to get the carousel to display under the main image, no matter how I re-arrange the DIVs within nflj_showcase_item_image_gallery.

Has anyone managed to do this before, as I would be very grateful for some advice. I'm not a good coder!
IIRC, that is one of the options for the gallery (either via CSS or js params). I'll have to do some digging to see if I can find the documentation for it.
ok, so I was kinda right and kinda wrong. I've tested literally 100's of 3rd party gallery scripts and don't have them all memorized on what they are capable of or not.

This particular gallery is setup to be like it is (with the thumbs on top), however, you CAN edit the .js file for it and un comment out a line I added (and comment out the line above it) that WILL put the thumbs below (but its not perfect).

edit the file /js/nflj/showcase/gallery.js

find lines 101 and 102
                $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
                //$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );

change to this:
                //$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
                $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );

This is going to also move the right hand controls (those two boxes that are above the thumbs along with it). You'd have to completely re write the js to do things different). Also, you will need to make some adjustments to the CSS (adjust them directly in the css template).

Another thing is that this particular script isn't a static height (height of the image container is dynamic) so you'll have to modify that as well (or your nav will jump up and down depending on the various heights of the image). You SHOULD be able to control this with max-width and max-height settings tho (again, you will have to mess around with it). I think once you do the JS edit above to at least get the thumbs nav below the items, it will make more sense than listening to me jabber on lol
Last edited:
with 2 quick CSS adjustments, you can get rid of the two right hand controls (those 2 grid looking boxes) and have a nice looking margin below the image container

edit the nflj_showcase_item_image_gallery.css template and find the following 2 classes

.rg-view (add display:none; to this class)

.es-carousel-wrapper (change margin-bottom: 20px; to margin-top: 20 px;)
A couple other adjustments you can make to get a custom look.

Forcing the max HEIGHT of an image gives you finer control and makes it "bounce" less and still works perfect with responsive for smaller screen widths like for smartphones.

edit the .rg-image img class (in the example below I am forcing the max height of any uploaded images to 300px)
.rg-image img {
max-height: 300px;  /* default is 100% */
max-width: 100%; 

Another thing you can do is force a max-width on the entire container by adding this to the nflj_showcase_item_image_gallery.css template (that class does not exist in the CSS template, so you will need to add the entire class as shown here)

.rg-gallery {
max-width: 400px;