This project is read-only.

RWD fluid layout for AD Gallery

Aug 12, 2012 at 9:07 PM
Edited Aug 12, 2012 at 9:08 PM

Anyone having any luck getting AD Gallery to maintain the correct aspect ratio on images as the viewport is resized for mobile devices. The other non gallery images correctly resize to their container using the max-width="100%". But AD Gallery is coded using px for image height. If there is no height value in px for the ad-image-wrapper CSS rule, or you happen to use % for height value, the large image is not displayed and the gallery is rendered useless.

projects.b2webservices.com/MSF/

I tried swapping out all the px settings in the js file with % but it made no difference.

For example:
.ad-image, .ad-image-wrapper {
    width: 100%; max-width: 100%;
    height: 66%; max-height: 400px;
   margin-bottom: 1%;
   position: relative;
   overflow: hidden;
   }

Firebug show this

<div class="ad-image" style="width: 0px; height: 0px; top: 0px; left: 300px;">

I've copied back in the authors js file so you can see how it does not scale the height of the image when the viewport gets smaller and the image width begins to resize. Notice how the logo and contact button do the RWD thing correctly.

Oct 12, 2012 at 6:19 PM

Did you get it to work? I was wondering the same thing.

Mar 12, 2013 at 6:49 PM
subscribing.

I am seeking this too, is an important feature for the gallery.
Apr 7, 2014 at 7:04 PM
Edited Apr 8, 2014 at 11:46 PM
For the adGallery to be responsive, you need to use a combination of CSS and javascript. The javascript is needed within adGallery's afterImageVisible callback to override the inline heights of the ad-gallery wrapper elements since they are set using javascript on page load. You cannot do 'height:auto !importan't since the rotating images are positioned absolute.

Here is an example to get you on the right track:

CSS:
@media only screen and (max-width: 1160px) {
    img {
        max-width:100% !important;
        height:auto !important;
    }
   .ad-gallery,.ad-image-wrapper,.ad-image {
        width:100% !important;
    }
}
Javascript:
$ImageGallery1.settings.callbacks.afterImageVisible = function() { 
    var imgHeight = $(".ad-image img").height();
    $(".ad-image-wrapper").css('height', imgHeight+'px');
}
$ImageGallery1 is our global instance of the adGallery used when we first initialized it like so $ImageGallery1 = $('.gallery').adGallery({...});
Jul 30, 2014 at 5:39 AM
Thanks for the suggestion, can you clarify where does the javacript put? or if there is a sample for RWD Adgallery will be perfect, thanks.
Jan 19, 2016 at 12:26 PM
Hi, Did you every manage to get this to work?. I would also like my gallery to be responsive but not sure how to add javascript "$ImageGallery1 = "
Jan 19, 2016 at 1:56 PM
No not really. What I did do is start over because I wanted a flickr like gallery that was responsive. So now I am using flex.images.js, fancybox and jquery along with PDO/MySQL on the server side. You can see it all at my High Sierra project @ esa-rol.com (east side adventures - range of light)
Jan 19, 2016 at 1:58 PM
Jan 19, 2016 at 2:04 PM
Many thanks for your help still like the style of AD Gallery might try royal slider http://dimsemenov.com/plugins/royal-slider/