这是我的代码。 我正在使用 Flickr API 在我的网站上显示一些图片。 我首先显示相册名称,然后显示其相应的图片。 一切正常。 现在我想在这里实现 jQuery 切换。 相册名称应该作为一个按钮,它的照片应该隐藏并在点击时显示。 我知道要求某人实施这一点是不可接受的,但请有人在这里给我一个线索。

<!-- language: lang-html -->

    <html><head>
    <head> <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
    <body height="200" width="345">
    <h4><div class="img-container" id="flickr"></div></h4>
    <button>Bottom &#8595;</button>
    <script>
    $(document).ready(function() { 
                $("button").click(function() {
                    $(document).scrollTop($(document).height());
                });
            });
    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=13796773%40N04&format=json&nojsoncallback=1",
      "method": "GET",
    }
    const flickr = $("#flickr");  // the wrapping div, where all albums divs will be appended
    $.ajax(settings).done(function(data) {
      $.each(data.photosets.photoset, function(i, gp) {
        const div = $("<div/>");  // a div for each album
        flickr.append(div);
        const albumname = $("<h2/>");  // headline for the album
        albumname.text(gp.title._content + " Gallery");
        div.append(albumname); 
        var id = gp.id; 
        var settings1 = { 
          "async": true, 
          "crossDomain": true,
          "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=13796773%40N04&format=json&nojsoncallback=1",
          "method": "GET",
        }
        $.ajax(settings1).done(function(data) {
          $.each(data.photoset.photo, function(i, gpr) {
            var farmId = gpr.farm;
            var serverId = gpr.server; 
            var id = gpr.id; 
            var secret = gpr.secret;
            div.append('<center><a data-fancybox="gallery" href="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg" target="_blank"><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/></a></center>');  // append images to album div
          }); 
        });
      });
    });   
    </script> 
    </body>
    </html>
    <style>
    img {max-height:130px; margin:3px; float: left; border:1px solid #dedede;} 
    div { top: 20px; clear: both; }
    button {
         position: fixed;
     color: black;
     font-size: 20px;
     background-color: #FF69B4;
      bottom: 20px;
      right: 20px;
        z-index: 9999;
        }
    </style>

  ask by vambay colony translate from so

本文未有回复,本站智能推荐:

1回复

从FlickrFeed链接Jquery中的图像

I am trying to link the images in my flikr feed. 我正在尝试在flikr feed中链接图像。 I keep running into issues being fairly new to Javascript. 我一直遇到Java脚本新手。 It
1回复

使用jQuery检索Flickr照片标题和描述

Annoyingly, the FlickrAPI provides the title and description of a photo in two separate methods. 烦人的是,FlickrAPI通过两种单独的方法提供了照片的标题和描述。 I'm having troub
1回复

jQuery-使用以下方法在一列中列出Flickr照片
标签

I have the following code... 我有以下代码... <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Flickr</
1回复

从flickr获取第一个图像结果

I have the typical example to get the first image from flickr. 我有一个典型的例子,可以从flickr获取第一张图像。 I call this script from a html. 我从html调用此脚本。 I use Javascr
2回复

拉Flickr图片标题?

My javascript is pulling single Flickr images randomly on each refresh. 我的JavaScript在每次刷新时随机提取单个Flickr图像。 I would like to also display the image titl
4回复

使用javaScript获取flickr/picasa图片

我想从flick / picasa中添加一张我的相册中图片的幻灯片放映,是否有可能以JavaScript方式获取页面上的图片,然后使用jQuery显示它们(我可以这样做:))