0

I would like to create a responsive photo-gallery in business catalyst. BC's photo gallery module automatically renders thumbnails, which I would like to preserve as it shortens my workflow. When you are creating the photo gallery, it allows you to set a fixed width and height, and I would like to create jQuery that can change the photo attributes to fit the screen. I have tried with CSS, but it only distorts the thumbnail.

For some context I am using bootstrap, and I would like create a fluid grid(with no margin). Col-LG-3, Col-MD-4, Col-SM-6, Col-xs-12.

When the gallery is rendered the code shows up like this:

<img src="/images/jully-black-in-concert-10.jpg?Action=thumbnail&amp;Width=400&amp;Height=330&amp;Algorithm=fill_proportional&amp;USM=1" alt="" border="0">

In order for the Thumbnails to work the I must have the follow attributes in the code:

Width=400&amp;Height=330

Can someone help create code that automatically changes the values above to adapt to bootstrap's grid system?

Ryan Perez
  • 139
  • 7

2 Answers2

1

So what I did to fix this issue, since I didn't get any response, I create some jQuery to wrap the pictures into div's with the bootstrap classes.

$('#photos a').wrap("<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12 overflow img-responsive '></div>");

I set the pictures to be bigger than the div's themselves, and used jQuery to apply img-responsive class.

It wasn't the greatest solution but it worked for me.

Ryan Perez
  • 139
  • 7
0

I was actually able to solve this by creating a xml feed, and using JQuery to bring the feed back on to my page with this code

$(function () {  
   $.ajax({  
            type: "GET",  
            url: "http://www.oneloveallequal.org/Galleries/Slide-show-with-hyphens/PhotoGallery.xml",
            dataType: "xml",
            success: function(xml) {  
                $(xml).find('img').each(function() {  
                   var location = 'http://www.oneloveallequal.org/Galleries/Slide-show-with-hyphens/';
                   var url = $(this).attr('src');  
                   var alt = $(this).attr('alt');
                   var des = $(this).attr('description');
                   var classReponsive = 'img-reponsive';
                    var thumbnail = '?Action=thumbnail&Width=940&Height=300&algorithm=fill_proportional&Format=png';
                   $('<div class="item"></div>').html('<img src="'+location+''+url+''+thumbnail+'" alt="'+alt+'"/><div class="carousel-caption"><p>'+alt+'</p></div>').appendTo('.carousel-inner');
                    $('.carousel-inner div').first().addClass('active');

                });  

            }  

        });

});

Ryan Perez
  • 139
  • 7