renderGallery

Mit der Funktion renderGallery() können auf einfache Art Bildergalerien auf Webseiten angezeigt werden. Es können beliebig viele renderGallery -Aufrufe/Seite erstellt werden. Das Lightbox Script und CSS werden pro Seite nur einmal geladen.

Seven49Cms.renderGallery(urlToJson,params);

  • urlToJson: CMSAPI/Files/Images.svc/GetListOfImages?thumbnailWith=130&path=/my-project/images/my-gallery/gallery-1/
  • params {} - defaults:
    • containerSelector: “.Gallery”, // In welchen Container sollen die Gallerie Elemente eingefügt werden
    • language: “de”, // Sprache angepasstes Javascript (Lightbox) - folgende Sprachen möglich de,en,fr,it
    • thumbContainerTag: “div”, // Element tag
    • itemsPerRow: 3 // nach itemsPerRow wird ein leeres empty <thumbContainerTag class="clear"></thumbContainerTag> zum clearen eingefügt. limit: 0 0 // 0 = alle Elemente werden angezeigt, X > 0 = nur X Elemente werden angezeigt

Beispiel

input:

<div class="Gallery1"></div>
<script> Seven49Cms.renderGallery("CMSAPI/Files/Images.svc/GetListOfImages?thumbnailWith=130&path=/my-project/images/my-gallery/gallery-1/" { containerSelector: ".Gallery1", itemsPerRow: 5});
</script>

output:
<div class="Gallery1 lightboxGallery">
<div class="GalleryImage GalleryImage1"><a href="https://help.seven49.net/images/my-gallery/gallery-1/01_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail1" src="https://help.seven49.net/images/my-gallery/gallery-1/01_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage2"><a href="https://help.seven49.net/images/my-gallery/gallery-1/02_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail2" src="https://help.seven49.net/images/my-gallery/gallery-1/02_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage3"><a href="https://help.seven49.net/images/my-gallery/gallery-1/03_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail3" src="https://help.seven49.net/images/my-gallery/gallery-1/03_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage4"><a href="https://help.seven49.net/images/my-gallery/gallery-1/04_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail4" src="https://help.seven49.net/images/my-gallery/gallery-1/04_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage5"><a href="https://help.seven49.net/images/my-gallery/gallery-1/05_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail5" src="https://help.seven49.net/images/my-gallery/gallery-1/05_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="clear"></div>
<div class="GalleryImage GalleryImage6"><a href="https://help.seven49.net/images/my-gallery/gallery-1/06_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail6" src="https://help.seven49.net/images/my-gallery/gallery-1/06_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage7"><a href="https://help.seven49.net/images/my-gallery/gallery-1/08_Flims_-Lanezzi.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail7" src="https://help.seven49.net/images/my-gallery/gallery-1/08_Flims_-Lanezzi__w_130__h_0.jpg" alt=""></a></div>
<div class="GalleryImage GalleryImage8"><a href="https://help.seven49.net/images/my-gallery/gallery-1/Situation.jpg" data-lightbox="Gallery1"><img class="Thumbnail Thumbnail8" src="https://help.seven49.net/images/my-gallery/gallery-1/Situation__w_130__h_0.jpg" alt=""></a></div>
</div>