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

Discussion in 'Showcase Support' started by nrep, Jun 5, 2014.

  1. nrep

    nrep Member Showcase

    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!
  2. Bob

    Bob Developer Staff Member

    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.
  3. nrep

    nrep Member Showcase

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

    Bob Developer Staff Member

    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: Jun 5, 2014
    nrep likes this.
  5. Bob

    Bob Developer Staff Member

    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;)
  6. nrep

    nrep Member Showcase

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

    Bob Developer Staff Member

    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;
    nrep likes this.
  8. Bob

    Bob Developer Staff Member

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

  9. nrep

    nrep Member Showcase

    Perfect, that's almost exactly what I'm after! :D
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.