Re-arrange Showcase Gallery

[nrep]

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!

 

[Bob]

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.

 

[nrep]

Thanks Bob, that would be super useful for me - I'll be getting another license if I can get the layout working

 

[Bob]

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

 

[Bob]

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

 

[nrep]

Cheers Bob, I'll give this a whirl tomorrow .

 

[Bob]

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;
}

 

[Bob]

here is what it LOOKS like when you make ALL the changes that I just blabbered about...

 

[nrep]

Perfect, that's almost exactly what I'm after!