Using the library
You can use
HTML
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
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
HTML
HTML
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
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
JavaScript
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
HTML
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
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
JavaScript
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')
});