0

我正在开发一个网页，我必须在其中展示一些来自 Facebook 的照片。我使用 jQuery 移动。

现在我可以动态显示一个列表，其中包含所有照片及其标题等。但图像以拇指版本显示，并不完全相同。横向模式下的所有照片都可以，但垂直模式下的照片比其他照片窄，并且列表不正常。

我想裁剪所有图像以使它们更小且全部相等。例如，20x20 左右。

我找到了很多关于这个的答案。我尝试了其中一些，但没有一个有效。我在他们的例子中尝试了一只猫，我在很多答案中都看到了它，但我无法让它发挥作用。我认为这是因为所有示例都是针对静态图像而不是像我这样动态生成的列表。

这是我用于生成列表并放置带有标题和描述的照片的代码。

$("#photosNJ").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
    ' class="gallery-page"' + ' data-url="Gallery' + i + '"> ' +
    ' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
    ' <ul class="gallery"></ul> ' + ' </div> ' +
    ' </div> ');

for (var n=0; n < albumPhotos[i].length; n++) {
    $('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][n] 
        + '"  rel="external"><img src="' +  albumThumbnails[i][n] + '"' + '/> </a> </li>');
}

我传递了我要显示的专辑和一个数字，该数字是专辑的编号，用于控制我设置的专辑数量。

我不知道如何在我的代码中调用一个已经完成的用于裁剪照片的脚本。我不需要选择图像的大部分，只需将其从左上（或下）角裁剪到 20x20（或其他）点。如果我可以从 Facebook 获取其他尺寸或已经裁剪的图像，这也是一个很好的解决方案。

正如第一条评论所说，我将 CSS 添加到我的 CSS 文件中并设置如下代码：

for(var n=0; n < albumPhotos[i].length; n++) {
                //console.log("cropping");
                $('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][n] 
                + '"  rel="external"><img class="crop" src="' +  albumThumbnails[i][n] + '"' + '/> </a> </li>');
           }

但是图像以相同的方式显示。我在我的主页中尝试了该解决方案，将其设置为硬编码并且它可以工作。图像被裁剪。但是当我尝试动态生成列表时，它不会。任何人都知道如何解决它？

4

0 回答 0