使用jquery创建simpe缩略图网格扩展预览 [英] Create simpe thumbnail grid expanding preview with jquery

问题描述

有没有其他方法可以参考此参考 http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/，有谁知道资源，创建函数的简单步骤，如上面没有插件的链接，我的意思是简单的手码jquery，我使用它时面临一个错误，因为网格不能正确加载包装宽度

is there any alternative way to this reference http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/ , do anyone know the resource, simple step to create function like the link above without a plugin, i mean with simple handcode jquery, i face a bug when use it as the grid is not stand proper with wrapper width while loading

谢谢

热烈

推荐答案

我创建了类似的东西，使用了一些jQuery，只是分享，可能会给你一些想法。

jsBin演示

I've created something similar that uses a bit of jQuery, just sharing, might give you some idea.
jsBin demo

HTML

<div id="preview">
  <img src=""><div><h2></h2><p></p></div>
</div>

<ul id="gooGallery">
  <li data-src="1.jpg" data-title="Description 1" data-alt="Name 1"></li>
  <li data-src="2.jpg" data-title="Description 2" data-alt="Name 2"></li>
  <li data-src="3.jpg" data-title="Description 3" data-alt="Name 3"></li>
</ul>

CSS：

*{ margin:0; padding:0; }
body{ color:#fff; background:#222;}
h1{ padding:2em; }
#gooGallery li{
  list-style:none;
  float:left;
  height:170px;
  background: none 50% / cover;
  transition:0.2s;
  cursor:pointer;
  width:25%;
}
#gooGallery li.active{ transform: scale(0.7) rotate(6deg) translateY(30px); }
#gooGallery li.active:after{
  content:"×";
  font-size: 4em;
  position:absolute;
  top:-67px;
  right:0;
}
#gooGallery li.full{ position:relative;  width:100%; height:auto; }
#preview{ display:none; }
#preview > *{ float:left; margin:2%; }
#preview img{ max-width:50%; }
@media screen and (max-width: 830px) {
    #gooGallery li{ width: 33.333%; }
    #preview img{ max-width:96%; }
}
@media screen and (max-width: 650px) {
    #gooGallery li{ width: 50%; }
    #preview img{ max-width:96%; }
}

jQuery：

var $prvw = $('#preview'),
    $gall = $('#gooGallery'),
    $li   = $gall.find("li"),
    $img  = $prvw.find("img"),
    $alt1 = $prvw.find("h2"),
    $alt2 = $prvw.find("p"),
    $full =  $("<li />", {"class":"full", html:$prvw});

$li.attr("data-src", function(i, v){
    $(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
    var $el = $(this),
        d = $el.data(),
        $clone = $full.clone();
    $el.toggleClass("active").siblings().removeClass("active");
    $prvw.hide();
    $full.after($clone);
    $clone.find(">div").slideUp(function(){
        $clone.remove();
    });
    if(!$el.hasClass("active")) return;
    $img.attr("src", d.src);
    $alt1.text(d.alt);
    $alt2.text(d.title);
    $li.filter(function(i, el){
        return el.getBoundingClientRect().top < evt.clientY;
    }).last().after($full);
    $prvw.slideDown();
});
$(window).on("resize", function(){
    $full.remove();
    $li.removeClass("active");
});

这篇关于使用jquery创建simpe缩略图网格扩展预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！