2015-06-03 2 views
-1

Я хотел бы создать отзывчивую фотогалерею в бизнес-катализаторе. Модуль фотогалереи BC автоматически создает эскизы, которые я хотел бы сохранить, поскольку это сокращает мой рабочий процесс. Когда вы создаете фотогалерею, она позволяет установить фиксированную ширину и высоту, и я хотел бы создать jQuery, который может изменить атрибуты фотографий для соответствия экрану. Я пробовал с CSS, но он только искажает миниатюру.Динамическое изменение атрибута ширины и высоты

Для некоторого контекста я использую бутстрап, и мне бы хотелось создать сетку для жидкости (без поля). Col-LG-3, Col-MD-4, Col-SM-6, Col-xs-12.

Когда галерея визуализируется код показывает вверх, как это:

<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"> 

Для того, чтобы Эскизы, чтобы работать я должен иметь последующие атрибуты в коде:

Width=400&amp;Height=330 
Может

кто-то помогите создать код, который автоматически изменяет приведенные выше значения для адаптации к сетчатой ​​системе бутстрапа?

+0

сделать демо на jsfiddle.net – Tasos

ответ

1

Так что я сделал, чтобы исправить эту проблему, так как я не получил никакого ответа, я создаю некоторый jQuery, чтобы обернуть изображения в div с помощью классов начальной загрузки.

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

Я поставил фотографии, чтобы быть больше, чем Див самих х, и использовать JQuery для применения IMG реагирующих класса.

Это было не самое большое решение, но оно сработало для меня.

0

я был фактически в состоянии решить эту проблему, создав фид XML, и с помощью JQuery, чтобы принести корм обратно на мою страницу с этим кодом

$(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'); 

       }); 

      } 

     }); 

});

Смежные вопросы