Klicken Sie auf ein Bild aus einer Galerie und zeigen mehrere Bilder auf der gleichen Seite

Ich habe eine Bildergalerie und ich möchte auf jedes Bild klicken, um 4 verwandtes Bild zu zeigen. Was ist der beste Weg, dies zu tun, ohne für jedes Bild eine ganz neue Seite zu erstellen, um die zugehörigen Bilder anzuzeigen?Klicken Sie auf ein Bild aus einer Galerie und zeigen mehrere Bilder auf der gleichen Seite

Ich verwende diese für Bildgalerie: http://codepen.io/dimsemenov/pen/ZYbPJM

Vorerst habe ich Adobe InDesign die vier Bilder in einer PNG-Datei (aus Platzgrenzen) zu zeigen, aber natürlich gibt es mehr ästhetische und intelligente Art und Weise . Bitte schlagen Sie Lösungen vor.

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Imgur Results</title> 


    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css'> 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css'> 

     <link rel="stylesheet" href="css/style.css"> 



</head> 

<body> 
    <h2>Banana:</h2> 

    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="imgur/banana/banana1.png" itemprop="contentUrl" data-size="900x900"> 

      <img src="imgur/banana/3NlNsLB.jpg" itemprop="thumbnail" alt="Image description" /> 

     </a> 

    </figure> 



    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="imgur/banana/banana2.tif" itemprop="contentUrl" data-size="900x900"> 
      <img src="imgur/banana/6gqpgDV.jpg" itemprop="thumbnail" alt="Image description" /> 
     </a> 
    </figure>

https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js>

<script src="js/index.js"></script>

Hier ist die js:

var initPhotoSwipeFromDOM = function(gallerySelector) { 

    // parse slide data (url, title, size ...) from DOM elements 
    // (children of gallerySelector) 
    var parseThumbnailElements = function(el) { 
     var thumbElements = el.childNodes, 
      numNodes = thumbElements.length, 
      items = [], 
      figureEl, 
      linkEl, 
      size, 
      item; 

     for(var i = 0; i < numNodes; i++) { 

      figureEl = thumbElements[i]; // <figure> element 

      // include only element nodes 
      if(figureEl.nodeType !== 1) { 
       continue; 
      } 

      linkEl = figureEl.children[0]; // <a> element 

      size = linkEl.getAttribute('data-size').split('x'); 

      // create slide object 
      item = { 
       src: linkEl.getAttribute('href'), 
       w: parseInt(size[0], 10), 
       h: parseInt(size[1], 10) 
      }; 



      if(figureEl.children.length > 1) { 
       // <figcaption> content 
       item.title = figureEl.children[1].innerHTML; 
      } 

      if(linkEl.children.length > 0) { 
       // <img> thumbnail element, retrieving thumbnail url 
       item.msrc = linkEl.children[0].getAttribute('src'); 
      } 

      item.el = figureEl; // save link to element for getThumbBoundsFn 
      items.push(item); 
     } 

     return items; 
    }; 

    // find nearest parent element 
    var closest = function closest(el, fn) { 
     return el && (fn(el) ? el : closest(el.parentNode, fn)); 
    }; 

    // triggers when user clicks on thumbnail 
    var onThumbnailsClick = function(e) { 
     e = e || window.event; 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; 

     var eTarget = e.target || e.srcElement; 

     // find root element of slide 
     var clickedListItem = closest(eTarget, function(el) { 
      return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); 
     }); 

     if(!clickedListItem) { 
      return; 
     } 

     // find index of clicked item by looping through all child nodes 
     // alternatively, you may define index via data- attribute 
     var clickedGallery = clickedListItem.parentNode, 
      childNodes = clickedListItem.parentNode.childNodes, 
      numChildNodes = childNodes.length, 
      nodeIndex = 0, 
      index; 

     for (var i = 0; i < numChildNodes; i++) { 
      if(childNodes[i].nodeType !== 1) { 
       continue; 
      } 

      if(childNodes[i] === clickedListItem) { 
       index = nodeIndex; 
       break; 
      } 
      nodeIndex++; 
     } 



     if(index >= 0) { 
      // open PhotoSwipe if valid index found 
      openPhotoSwipe(index, clickedGallery); 
     } 
     return false; 
    }; 

    // parse picture index and gallery index from URL (#&pid=1&gid=2) 
    var photoswipeParseHash = function() { 
     var hash = window.location.hash.substring(1), 
     params = {}; 

     if(hash.length < 5) { 
      return params; 
     } 

     var vars = hash.split('&'); 
     for (var i = 0; i < vars.length; i++) { 
      if(!vars[i]) { 
       continue; 
      } 
      var pair = vars[i].split('='); 
      if(pair.length < 2) { 
       continue; 
      }   
      params[pair[0]] = pair[1]; 
     } 

     if(params.gid) { 
      params.gid = parseInt(params.gid, 10); 
     } 

     return params; 
    }; 

    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { 
     var pswpElement = document.querySelectorAll('.pswp')[0], 
      gallery, 
      options, 
      items; 

     items = parseThumbnailElements(galleryElement); 

     // define options (if needed) 
     options = { 

      // define gallery index (for URL) 
      galleryUID: galleryElement.getAttribute('data-pswp-uid'), 

      getThumbBoundsFn: function(index) { 
       // See Options -> getThumbBoundsFn section of documentation for more info 
       var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail 
        pageYScroll = window.pageYOffset || document.documentElement.scrollTop, 
        rect = thumbnail.getBoundingClientRect(); 

       return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; 
      } 

     }; 

     // PhotoSwipe opened from URL 
     if(fromURL) { 
      if(options.galleryPIDs) { 
       // parse real index when custom PIDs are used 
       // http://photoswipe.com/documentation/faq.html#custom-pid-in-url 
       for(var j = 0; j < items.length; j++) { 
        if(items[j].pid == index) { 
         options.index = j; 
         break; 
        } 
       } 
      } else { 
       // in URL indexes start from 1 
       options.index = parseInt(index, 10) - 1; 
      } 
     } else { 
      options.index = parseInt(index, 10); 
     } 

     // exit if index not found 
     if(isNaN(options.index)) { 
      return; 
     } 

     if(disableAnimation) { 
      options.showAnimationDuration = 0; 
     } 

     // Pass data to PhotoSwipe and initialize it 
     gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
     gallery.init(); 
    }; 

    // loop through all gallery elements and bind events 
    var galleryElements = document.querySelectorAll(gallerySelector); 

    for(var i = 0, l = galleryElements.length; i < l; i++) { 
     galleryElements[i].setAttribute('data-pswp-uid', i+1); 
     galleryElements[i].onclick = onThumbnailsClick; 
    } 

    // Parse URL and open gallery if it contains #&pid=3&gid=1 
    var hashData = photoswipeParseHash(); 
    if(hashData.pid && hashData.gid) { 
     openPhotoSwipe(hashData.pid , galleryElements[ hashData.gid - 1 ], true, true); 
    } 
}; 

// execute above function 
initPhotoSwipeFromDOM('.my-gallery');

hier ist die CSS:

.my-gallery { 
    width: 100%; 
    float: left; 
} 

.my-gallery img { 
    width: 200px; 
    height: 200px; 
    display: block; 
} 
.my-gallery figure { 
    display: block; 
    float: left; 
    margin: 0px 15px 20px 0; 
    border: 3px solid #000; 

} 

.my-gallery figcaption { 
    display: none; 
}

Auch gibt es einen einfacheren Weg, um diese Fotogalerie zu haben, ohne diese Bibliothek oben mit?

Grundsätzlich würde Ich mag so etwas zeigen, wenn Sie auf einem Bild klicken: ^ über das obwohl mit Adobe Illustrator gemacht und wäre schön, es mit HTML/CSS zu machen.

Dies ist, wie die Galerie selbst zeigt:

Quelle

2016-11-21 Mona Jalal

Hey was, wenn du etwas wie dieses CSS Modal benutzt hast und es nur mit deinen 4 Bildern bestückt hast? http://codepen.io/ohnoitsaustin/pen/zGmJjz – s0rfi949

du Fancybox unter Verwendung erreichen können.

See this Fiddle.

In diesem Beispiel auf dem sichtbaren Bild klicken löst ein Klick-Ereignis, das eine versteckte Galerie mit Fancybox öffnet.

HTML

<!-- Your visible image(s) --> 
    <a class="fancyboxLauncher" href="http://fancyapps.com/fancybox/demo/1_b.jpg" title="one"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a> 

<!-- Your hidden gallery -->  
    <div style="display: none;"> 
    <a class="fancybox" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" title="one"></a> 

<a class="fancybox" href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg" title="two"></a>

// Trigger event 
$(".fancyboxLauncher").on("click", function() { 
    $(".fancybox").eq(0).trigger("click"); 
    return false; 
}); 

// Init Fancybox 
$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
    padding: 0 
});

Sie noch das 4-in-1 Bild natürlich verwenden können, benutzen Sie einfach ein Bild anstelle von 4. Unabhängig davon, haben Sie eine Menge von Optionen damit.

Quelle

2016-11-22 00:18:39 Cooleronie

Klicken Sie auf ein Bild aus einer Galerie und zeigen mehrere Bilder auf der gleichen Seite

Antwort

Verwandte Themen