Photo Gallery module- isn't responsive

Hi there,
I am trying to find out if someone can help me with the photo gallery module. I have used the photo gallery module in a responsice template but it isn't responsive when you look at it on a phone. I have asked for help from the support but they said it is a css / html question so they can't help. This seems a bit odd as the module has been provided in a responsive template- and should really work as responsive.
If anyone could help or knows of the code that needs to be added in to make it work, that'd be really appreciated
Many thanks
Emily

Here's a few lines of CSS to get the modal behaving responsively: javascript - Making Business Catalyst Lightbox Responsive - Stack Overflow

Similar Messages

  • Photo Gallery Module- is not responsive

    Hi there,
    I have been using the business catalyst for a few sites but I have noticed that the photo gallery module isn't responsive and when you look at the gallery on a phone it doesn't adjust to fit the screen. Is there anything that can be done about it?
    I asked the support guys but they said they can't help as it is an html / css question, however, I think if the responsive template comes with a photo module- it should actually be responsive.
    Thanks
    Emily

    Here's a few lines of CSS to get the modal behaving responsively: javascript - Making Business Catalyst Lightbox Responsive - Stack Overflow

  • How to make the Photo Gallery module responsive?

    Hi,
    I am using Fondation and have a photo gallery on this page www.sunnysideinstantlawn.com.au/gallery made from the Photo Gallery Module in BC.  How do I make it responsive?
    I know there are alternatives out there using jquery but I would like to continue using the photo gallery module if possible.
    Any help would be greatly appreciated.
    Cheers,
    Tammy

    Hi BBowyer
    I really like Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) - how do I implement it on this page http://www.sheepconnectsa.com.au/gallery?
    I understand jquery but it gets abit confusing with implementing it on this page.  Would it be best for me to create a web app and do it?
    Cheers,
    Tammy

  • How to make existing Photo gallery module responsive?

    I could not find any tutorials how to change the existing photo gallery module so it would be responsive. Is there a solution already?

    The link I put above maybe?
    CSS - Every element has a default display type but every element can have its block level changed.
    A span is an inline element but you can turn it into a block level element. A table element is a table or table cell display type but you can turn it into block level. This is all CSS2/1 stuff so cross browser compatible (but if your doing media queries and responsive the old browsers are not considered anyway) and very straight forward.

  • How do I modify the template used in the Photo Gallery module

    I notice the Photo Galleries are rendered as an HTML table and I would like to make a small modification to the way the gallery is rendered on the page.
    Basically I just want to wrap a DIV around the <img> tag so I can control the look of the image via my own CSS.
    I see there is the ability to modify Module Templates, but the photo gallery module is not listed there.
    Where can I access the template used for a photo gallery?
    Alternatively I will need to display the images myself using an XML feed and jQuery, but I would rather use BC's own modules when I can.

    Hi David,
    There is no template for the photo Galleries. But if you are using Firebug you can find out the css values and add your own modification by adding CSS by the same selector as the current gallery to your own page and use the !Important value to over write the gallery css.

  • Photo Gallery Module - Customize large image size

    I need to figure out how to customize the size of the full image on the Photo Gallery Module. I have a couple of clients using this module that do not understand how to crop and resize images before uploading them.
    I understand this can be done through CSS, but the issue I foresee is that the original image is still used which could have a large file size. Is there a workaround for resizing the full size image and also reducing the actual file size? Either through CSS, JS, or maybe even the new BC Liquid engine? Any help would be appreciated. Thanks.

    You can go to the file manager and use the resize option on images in there.
    BUT
    They need to do this outside of such systems, BC will only edit based on numbers and math, if the client gets the wrong proportional values it will screw up the images, the system will not crop the images, only scale them so things can turn out squashed etc.
    If images are being used on the web as an indicative representation of something for a site, they need to be done properly and out of the system before they come in.

  • Simple way to use the Photo Gallery Module and flexslider to create an editable image slider?

    I want to offer an image slider that my clients can easily update themselves through the Admin. Ive researched it alot and I know it can be done using web apps but does my cliently seriously need to pay over $400 a year for the webcommerce option just to have an updatable image slider?? I find that unrealistic. Does anyone know how to set this up using the photo gallery module and "flexslider" so clients on the business marketing plan can have access to a simple and clean editable image slider?
    Any BC experts that can help would be greatly appreicated!
    Thankyou

    Not an expert, but I think what you're looking for is a slider that can get its list of photos from an XML file.  The Photo Gallery module can produce an XML file.

  • Export preset to Business Catalyst Photo Gallery Module

    Does anyone know of a Export Preset to Business Catalyst Photo Gallery Module. Similar to the ones available for exporting to Smugmug or Zenfolio?

    If you're a little familiar with Business Catalyst, you might find this widget helpful.
    It's a BC Photo Gallery - Muse Widget, Its very easy to use and customize.
    There is a training video on how to set it up.
    However Brad is right, you'll need to upgrade to BC webMarketing Plan.

  • Photo Gallery module - photo removal

    Gday BC users
    I have setup a Photo Gallery via the standard photo gallery module.
    I haven't found a method via the BC interface to remove an item. I did it via FTP, but am wondering, is FTP the only way available? as this doesn't really help my client to be an administrator.
    cheers
    Darryl

    Your client can easily delete it using the file manager in the admin. No need to use FTP. They can add images the same way.
    Message was edited by: Brad Lawryk

  • Easiest way to edit photo gallery modules?

    Hi,
    I apolagise if this is a simple question but where can I customixe the CSS of Photo Gallery Modules, just to change thumbnail size etc.?
    Thanks.

    http://forums.adobe.com/message/6230084#6230084

  • Can I add a business catalysts Photo Gallery module to Muse.

    Can I add a business catalysts Photo Gallery module to Muse - As my client want to upload images themselves to the gallery.
    I know that with the Muse plugin this is not possible. Therefore wanted to see if the photo gallery module in BC would work the same as the Blog Module?
    Thanks

    If you're a little familiar with Business Catalyst, you might find this widget helpful.
    It's a BC Photo Gallery - Muse Widget, Its very easy to use and customize.
    There is a training video on how to set it up.
    However Brad is right, you'll need to upgrade to BC webMarketing Plan.

  • How do I do a very basic CSS customization on the standard Photo Gallery Module lightbox?

    Hi,
    All I want to do is make the text description that appears when you click on a picture within the standard photo gallery a different colour.
    If I view source on a gallery page I see the CSS file used is Catalyststyles/lightbox.
    Any help would be appreciated.

    Thanks Liam,
    I found that I can target that Caption in my style sheet by adding a the style:
    #imageData #caption
    my new style here

  • Photo gallery module manage items description not working

    Hi. On this page I've got two photo galleries. For some reason the Description in the Manage Items tool only works some of the time. Seems to be quite random as to when it will/won't work. Is there a reason for this?
    Waitakeres Ranges Maps

    I'm having the same problem. Can you give me an idea of how this is possible using AJAX or point me at a tutorial?
    for every iweb photos page iweb generates an rss.xml file with it, the captions are kept in the rss.xml .
    so you can use ajax method to read the rss.xml and figure out what need to be manipulated.
    there is no tutorial of any kind for iweb ajax widgets, I have not seen any one yet to crack an iweb widgets (this forum or elsewhere); so you are on your own.
    that said you can hyperlink photos page captions and thumbnails with simple javascript (simple mapping lookup), but you still need to know javascript and iweb widgets.
    here is my simple javascript sample: http://temp.cyclosaurus.com/NoThumbnails/Photos.html
    thumbnails and captions are hyperlinked to apple, ggogle and yahoo.
    code is linked to the sample, you'll have to adapt it to your own needs.

  • Responsive Photo Gallery

    Hi guys, first time posting here. BC Support recommended I come to the forums to get some help!
    I'm working on an existing site and turning it into a responsive site.
    I've done a majority of the pages, except for the photo gallery page. The BC photo gallery module displays all photos as a table. Is there any way of changing the table into a series of divs?
    Currently the photo gallery displays:
    <table cellspacing="0" class="photogalleryTable">
      <tbody>
        <tr>
          <td class="photogalleryItem">
                    <a onclick="myLightbox.start(this);return false;" rel="lightbox[9216]" href="/gallery/1nirebo-motel-front.jpg" title="">
                      <img src="/gallery/1nirebo-motel-front.jpg?Action=thumbnail&amp;Width=200&amp;Height=130&amp;A lgorithm=proportional&amp;USM=1" alt="" border="0">
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    But I want to be able to do:
    <div class="some_Container">
         <a href="#"><img src="blah"></a>
    </div>
    I've looked everywhere but can't find any relevant information to suit my problem! Maybe BC should enable this sort of feature in the photo gallery module tag if this feature isn't in there already.
    Any help would be greatly appreciated!
    Akira Dawson - Kapow Interactive

    I figured it out! This may help you guys! I used some jquery and AJAX to achieve the result! I used fancybox as my plugin. I created a photo gallery as per normal, generated an XML file and used the following:
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/js/fancybox/source/jquery.fancybox.pack.js"></script>
    <link type="text/css" rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" />
    <script type="text/javascript">
    j$ = jQuery.noConflict();
              j$(document).ready(function() {
                        j$.ajax({
                          type: "GET",
                          url: "/gallery/PhotoGallery.xml",
                          dataType: "xml",
                          success: function(xml) {
                                  j$(xml).find('album').each(function(){
                                    var i = 1;
                                    var path = jQuery(this).attr('lgpath');
                                    j$(this).find('img').each(function(){
                                            var src = jQuery(this).attr('src');
                                            var alt = jQuery(this).attr('alt');
                                            if(i == 1) {
                                                      var active = ' class="active"';
                                                      i++;
                                            } else var active ='';
                                            j$('<div class="gallery"><a href="' + path + src +'" class="fancybox"><img src="' + path + src + '" alt="' + alt + '" title="' + alt + '" /></a></div>').appendTo('#photoGallery');
                                  j$(".fancybox").fancybox();
    </script>
    In my html, I have:
    <div id="photoGallery">
    </div>
    now you can go into your CSS and style it as you wish, I hope this helps some people!

  • Photo gallery in details view

    Hey all. I'm developing a site for a real estate agency. I have built a web app that lists and displays individual properties. I have managed to hook up Business Catalyst's Photo gallery module that displays a specific gallery (one for each property) on the details page template. I did this by creating a text sting field in the web app, into which you can input the gallery tag specific for each property. Like this: ({module_photogallery,33715, 4,,6,175,150,ThumbnailAlgorithm,fill_proportional}). This works, but the client now says they don't like the "lightbox" function of the default BC gallery module, and want it to function differently. As in having clickable thumbnails that populate a static image area. Is this possible? I understand that I could use different image galleries, if it were a gallery on a static page. My problem is that I need a gallery that can be different for each web app item and work within the details page of a web app. Any help would be appreciated.
    Here is the test link: Anne Rogers Realty Group, Inc - Committed to our clients, our neighborhood, with personalized service every time. note the way the list and details pages function.
    Thanks

    Yes,
    What you are seeing by default is shown as 'My folders' view. It's a flat alphabetical list of the last level subfolders in which you have media files.
    Click on the little yellow icon just right of the 'My folders' title bar, and you switch to the 'Folders' view which reflects what you see in your explorer. The difference is that by default, you see only subfolders having image files; if you want to display subfolders without image files, right click on the master folder and choose to show empty folders; that choice is not sticky.

Maybe you are looking for