#Simpleimage html code#

Visit the Simple Image Gallery product page at: You can see a demo of the plugin here: LEARN MORE Supports JPEG, PNG, GIF and WEBP as source images. Allows printing the image gallery grid when using the print preview feature available in most Joomla components (including the default article system and K2). Uses Fancybox 3 for the lightbox/modal previews.

#Simpleimage html code#

You can then modify both the HTML and CSS code included there to match your template's design and colors. Simply copy the folder /plugin/jw_sig/tmpl/Classic into /templates/YOUR_TEMPLATE/html/jw_sig/ so that you can access its files in /templates/YOUR_TEMPLATE/html/jw_sig/Classic/. You can use MVC overrides to change how the thumbnail grid looks in your site. The default 'root folder' in the plugin's parameters is 'images' because that's the default folder for uploading media files in Joomla as well. And all that using a simple plugin tag like plugin tags but just the gallery folder name. The plugin can turn any folder of images located inside your Joomla website into a grid-style image gallery with lightbox/modal previews. To manually cycle through the slides, clicking the next button adds one to the currentIndex variable, while clicking the previous button subtracts one from the currentIndex variable.Adding image galleries inside your Joomla articles, K2 items, Virtuemart/HikaShop products or any other component that supports 'content' plugins is dead-simple. They work like the autoSlide function, except they cancel the automatic cycling when clicked. These define what will happen when we click the previous and next buttons. Next we define our previous and next actions. After the if statement, we call our cycleItems function. If we didnвЂ™t have this if statement, we wouldnвЂ™t be able to cycle through our list of images. This statement says that if our currentIndex variable is greater than the total amount of images in our slider, reset the variable back to zero.

Then we define a very important вЂifвЂ™ statement. Inside of that function, we increment the currentIndex variable by one, so that $('.container div').eq(currentIndex) will always reference the next container div. This variable stores a setInterval function, which takes a 3000 millisecond delay, or three seconds.

We do this by creating another variable called autoSlide. To make sure that our images rotate automatically, we need to provide a way to continuously call our cycleItems function after a certain amount of time has passed. The next thing to do inside of our cycleItems function is to hide all of our image container divs, and set item to display: inline-block. So if currentIndex is 0, $('.container div').eq(currentIndex) will target the first image container in our image slider. The eq method provided by jQuery takes an integer, and will target the first item returned by $('.container div') that matches the integer. This variable is set to $('.container div').eq(currentIndex). Inside of this function, we create a variable called item. This function will be used to display the correct image, while ensuring that the others stay hidden. Next, we create a function called вЂ cycleItemsвЂ™. This last variable gives us the total amount of slides in our image slider.

The third variable is itemAmt, which is set to the length of our items variable. This will return a list of container divs with images inside of them. The second variable is items, which is set to $('.container div'). The first variable is currentIndex, and it is set to 0. First up, we need to define a few important variables.