Question

我想在商业催化剂中创建一个响应式照片库。 BC的照片库模块自动呈现缩略图，我希望保留缩略图，因为它缩短了我的工作流程。当您创建照片库时，它允许您设置固定的宽度和高度，我想创建可以更改照片属性以适应屏幕的jQuery。我尝试过使用CSS，但它只会扭曲缩略图。

对于某些上下文我使用bootstrap，我想创建一个流体网格（没有边距）。 Col-LG-3，Col-MD-4，Col-SM-6，Col-xs-12。

渲染图库时，代码显示如下：

<div ng-controller="DictionaryController">
    <input type="search" ng-model="query" ng-change="queryChanged()" ng-model-options="{updateOn: 'blur'}" />
</div>

为了使缩略图起作用，我必须在代码中具有以下属性：

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

有人可以帮助创建自动更改上述值的代码以适应bootstrap的网格系统吗？

Answer 1

所以我采取了解决这个问题的方法，因为我没有得到任何响应，我创建了一些jQuery来将图片包装到带有引导类的div中。

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

我将图片设置为大于div本身，并使用jQuery应用img-responsive类。

这不是最好的解决方案，但它对我有用。

Answer 2

我实际上可以通过创建一个xml feed来解决这个问题，并使用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');

                });  

            }  

        });

}）;

动态更改宽度和高度属性

2 个答案: