PR-DC JavaScript Gallery Library

Using the library

You can use PRDC_GALLERY either with locally hosted files or through CDN providers. In both cases, include the library stylesheet in the <head> of your page and load the JavaScript dependencies before closing </body>. The examples below use CDN links.
HTML


    <head>
        ...
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PR-DC/PRDC_GALLERY@main/dist/PRDC_GALLERY.css">
    </head>

Add jQuery first, then load the gallery library script:
HTML


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/PR-DC/PRDC_GALLERY@main/dist/PRDC_GALLERY.min.js"></script>

Creating a gallery with a carousel using an ID selector

To create a gallery with a carousel using an ID selector, first make sure that the gallery is properly formatted in the following way: Every image in the gallery needs to have a high-res-src attribute pointing to the high-resolution image location that is going to be displayed in the carousel:
HTML


    <img high-res-src="images/high-res-images/image1.jpg" src="images/low-res-images/image1-thumbnail.jpg">

The src attribute is the location of the image that is animated from its location on the page to the carousel (it is usually the source pointing to the same image with a lower resolution (a thumbnail image)). All images need to be wrapped in an element whose selector (ID in this case) is going to be passed to the .attach method of the PRDC_GALLERY_CLASS class.
HTML


    <img high-res-src="images/high-res-images/image1.jpg" src="images/low-res-images/image1-thumbnail.jpg">
    <img high-res-src="images/high-res-images/image2.jpg" src="images/low-res-images/image2-thumbnail.jpg">
    ...

A working example of the gallery with the carousel containing six images:

HTML code for a gallery of six images using an ID selector can be created in the following way
HTML


    <div id="my-gallery">
        <img high-res-src="images/high-res-images/image1.jpg" src="images/low-res-images/image1-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image2.jpg" src="images/low-res-images/image2-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image3.jpg" src="images/low-res-images/image3-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image4.jpg" src="images/low-res-images/image4-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image5.jpg" src="images/low-res-images/image5-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image6.jpg" src="images/low-res-images/image6-thumbnail.jpg">
    </div>

Create an instance of PRDC_GALLERY_CLASS and attach the gallery using the #my-gallery ID selector after jQuery is loaded, as shown in the following snippet:
JavaScript


     $(document).ready(function () {
       galleries = new PRDC_GALLERY_CLASS();
       galleries.attach('#my-gallery')
     });

Creating galleries and carousels using class selectors

Creating galleries with class selectors is very similar to creating them with ID selectors and is more suitable for creating multiple instances. As in the case of IDs, every image in the gallery needs to have a high-res-src attribute pointing to the high-resolution image location and a src attribute pointing to the thumbnail image. The only difference is in the selector which is now a class.
HTML


    <div class="my-gallery">
        <img high-res-src="images/high-res-images/image1.jpg" src="images/low-res-images/image1-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image2.jpg" src="images/low-res-images/image2-thumbnail.jpg">
        ...
    </div>

To illustrate the use of classes as selectors, we provide a working example of two galleries of three images each having its own carousel:

Gallery 1

Gallery 2

HTML code for creating these galleries could look like the following:
HTML


    <div class="my-gallery">
        <img high-res-src="images/high-res-images/image1.jpg" src="images/low-res-images/image1-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image2.jpg" src="images/low-res-images/image2-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image3.jpg" src="images/low-res-images/image3-thumbnail.jpg">
    </div>

    <div class="my-gallery">
        <img high-res-src="images/high-res-images/image4.jpg" src="images/low-res-images/image4-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image5.jpg" src="images/low-res-images/image5-thumbnail.jpg">
        <img high-res-src="images/high-res-images/image6.jpg" src="images/low-res-images/image6-thumbnail.jpg">
    </div>

JavaScript code for creating an instance of PRDC_GALLERY_CLASS and attaching galleries using a class selector .my-gallery is shown in the following snippet:
JavaScript


     $(document).ready(function () {
       galleries = new PRDC_GALLERY_CLASS();
       galleries.attach('.my-gallery')
     });