动态更改宽度和高度属性

Question

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

对于某些上下文，我正在使用 bootstrap，并且我想创建一个流畅的网格（没有边距）。 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

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

Answer 1

所以我做了什么来解决这个问题，因为我没有得到任何回应，我创建了一些 jQuery 来将图片包装成 div 的 bootstrap classes.

$('#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 class。

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

Answer 2

我实际上能够通过创建 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');

                });  

            }  

        });

});

动态更改宽度和高度属性

Dynamically Change width and height attribute

html

css

jquery

business-catalyst

twitter-bootstrap