Get Software

The content images or the album images in a large number feels much more effective to show in some smaller image items or the image thumbnail items, so that the users can see some images in a smaller size relatively to navigate and scroll that some image items that we specify before. If the user wants to see in more detail that they desired, the image slider will look more beautiful by combining with image lightbox. This is yet another alternative for those of you who need the image slider of the content of blog and want to make the blog content more engaging and interactive.

In order to make the image slider items we will use jquery caroufredsel that equipped with next prev mouse navigation and pagination controls for the user, which will make your blog content more beautiful. Implementing of the jquery image slider caroufreadsel for the image items in the content blog, must be use list of the images such as <ul> and <li> tag as the others image slider that I have discussed previously. You have to adjust the distance of the image items that is displayed and the users can scroll per number of image items that is displayed.

1. Create HTML Script Code for Image Items Slider Caroufredsel.  Here I’ll take the html script code for the images of my content blog that completed with the lightbox effect, description, etc. Then make the complete  HTML Script Code for Image Items Slider Caroufredsel from that. So that the Html Script Code would be like this:

<div id="wrap-carousel"> <div id="carousel"> <ul> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUh90gYy0W72P8UU1k5wAbrKXFtkZwdu9khH_xCie1U14TUgHzE4bJjkhu25dZogRd_fJG4GRU6oXXusEF_hc0KV0BFt8plwYGzukKLEH3z3sa28-o_VG-r7IriPjuLIqa4zf7qpfWrnc/s1600/Kalender-Wedding2013-b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="January"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUh90gYy0W72P8UU1k5wAbrKXFtkZwdu9khH_xCie1U14TUgHzE4bJjkhu25dZogRd_fJG4GRU6oXXusEF_hc0KV0BFt8plwYGzukKLEH3z3sa28-o_VG-r7IriPjuLIqa4zf7qpfWrnc/s200/Kalender-Wedding2013-b.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEyCqNj3pWkhIvI5XviZ2V8Gj01wd-nJ-bObeh_9F7vRMULMqBVzuAxpzZ6hkbQvpFCJMVMSkOr2ppnLLa0WaHa4GluxbwfsA5CnqqUUVCst6VxBIqetj7CIdPwJYqTV4D-2RSKHwQo4E/s1600/Kalender-Wedding2013-c.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="February"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEyCqNj3pWkhIvI5XviZ2V8Gj01wd-nJ-bObeh_9F7vRMULMqBVzuAxpzZ6hkbQvpFCJMVMSkOr2ppnLLa0WaHa4GluxbwfsA5CnqqUUVCst6VxBIqetj7CIdPwJYqTV4D-2RSKHwQo4E/s200/Kalender-Wedding2013-c.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNTSg8Lk4mYqkhZjs3GgMrCRuev13KD4W8rdOib1eZk40ZeVjZQe_tKhGB63-f3lO0nr5pynmdW75qbGXD_kKubV4LYid4WeLAWJIcJwPFe-xBMqPhy1ZYpyPtSz-XrtaGooTZbUJoLx8/s1600/Kalender-Wedding2013-d.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="March"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNTSg8Lk4mYqkhZjs3GgMrCRuev13KD4W8rdOib1eZk40ZeVjZQe_tKhGB63-f3lO0nr5pynmdW75qbGXD_kKubV4LYid4WeLAWJIcJwPFe-xBMqPhy1ZYpyPtSz-XrtaGooTZbUJoLx8/s200/Kalender-Wedding2013-d.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmGCjE36EGE5CYmCqOYyEw41r1xRQ40r4L38PmMBtXcJa1pMlPL4G_XWAzHOGs8YZ0Bm8D318Ts_1nDe48gHZXBTFBMKB54Ix8JZ7tAWSUzAFkmBp-8iKSFap96fMSkDPM-9Piizum3I/s1600/Kalender-Wedding2013-e.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="April"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmGCjE36EGE5CYmCqOYyEw41r1xRQ40r4L38PmMBtXcJa1pMlPL4G_XWAzHOGs8YZ0Bm8D318Ts_1nDe48gHZXBTFBMKB54Ix8JZ7tAWSUzAFkmBp-8iKSFap96fMSkDPM-9Piizum3I/s200/Kalender-Wedding2013-e.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVe3vk2rwBKFAZh5hVe1EifDAm_ugJNf0483mj9aDkIebwJdIVbwB0JYX6gkwt6jOl5A1lBdMopie5b19BgzqRtsNqZFPUFLF99o5vMpZCpO0vo88a83mxxMT5_Rq62BTtUs-V1n2N_0/s1600/Kalender-Wedding2013-f.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="May"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVe3vk2rwBKFAZh5hVe1EifDAm_ugJNf0483mj9aDkIebwJdIVbwB0JYX6gkwt6jOl5A1lBdMopie5b19BgzqRtsNqZFPUFLF99o5vMpZCpO0vo88a83mxxMT5_Rq62BTtUs-V1n2N_0/s200/Kalender-Wedding2013-f.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwrDifTepGsRX1_5JXF8PTZXtPyCEsTqVUyukXGmQqUV_hOA5zl8JsnTMYhA9peKaV1rzfbLeJMBGS2fhJF5Qqm2UnTsHCSHyLwO7UVUQMWSEBxCZgNvotjie4mf_uxdbfJw4PtOrTeU/s1600/Kalender-Wedding2013-g.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="June"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwrDifTepGsRX1_5JXF8PTZXtPyCEsTqVUyukXGmQqUV_hOA5zl8JsnTMYhA9peKaV1rzfbLeJMBGS2fhJF5Qqm2UnTsHCSHyLwO7UVUQMWSEBxCZgNvotjie4mf_uxdbfJw4PtOrTeU/s200/Kalender-Wedding2013-g.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNyQe22eBakzrMFji-pySRJHIY5SwLOv6kV-H4EgoanTvOon00r0GONMKh3LuZaH-dtEHqJX18x-Be51_9CoKmP3PIlBrDCvzQatlDd2rMuuSowGXyZUNAFVeE-LcGJtMeuCLhsIyNYU/s1600/Kalender-Wedding2013-h.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="July"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNyQe22eBakzrMFji-pySRJHIY5SwLOv6kV-H4EgoanTvOon00r0GONMKh3LuZaH-dtEHqJX18x-Be51_9CoKmP3PIlBrDCvzQatlDd2rMuuSowGXyZUNAFVeE-LcGJtMeuCLhsIyNYU/s200/Kalender-Wedding2013-h.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYM0ltLujUgOUl4uTkFfpeipCyPN7dcUrEdk6l-80je1bL5fHOwLPqbxbQAp5ot9P_f9YV77ozg8skBORnEYD53uuTlURkVvxczrt6loWtMseXloomjTKhfYryIZ1ChvKa_wdN_iA1RCw/s1600/Kalender-Wedding2013-i.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="August"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYM0ltLujUgOUl4uTkFfpeipCyPN7dcUrEdk6l-80je1bL5fHOwLPqbxbQAp5ot9P_f9YV77ozg8skBORnEYD53uuTlURkVvxczrt6loWtMseXloomjTKhfYryIZ1ChvKa_wdN_iA1RCw/s200/Kalender-Wedding2013-i.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiAy6b3NU7fWuQvyNEvvshpqnYAUIZUpvjoKCJTh5WwEaJhz9eJuRsZGJwi9GupBolDgXE-ezWhUkxRta8Dgjl9TX1heQ8zdiJgUkq-D7ZysLzRDg2qrpmEF0zpTkpLB9aOklBi7lznTg/s1600/Kalender-Wedding2013-j.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="September"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiAy6b3NU7fWuQvyNEvvshpqnYAUIZUpvjoKCJTh5WwEaJhz9eJuRsZGJwi9GupBolDgXE-ezWhUkxRta8Dgjl9TX1heQ8zdiJgUkq-D7ZysLzRDg2qrpmEF0zpTkpLB9aOklBi7lznTg/s200/Kalender-Wedding2013-j.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiHI8I6ndlQlqvmZZF5Sm-KPFRtqelbU-VlJlrSKg8Wj-Vwf_QcL-t4OHeAnYDY27osO_lAn7UNbAQTVQS79AhYK4tv-4IPj_CLWa66DRBH3fdT8fvoHhKc7LO8ryJkBjtFueEdf60aEs/s1600/Kalender-Wedding2013-k.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="October"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiHI8I6ndlQlqvmZZF5Sm-KPFRtqelbU-VlJlrSKg8Wj-Vwf_QcL-t4OHeAnYDY27osO_lAn7UNbAQTVQS79AhYK4tv-4IPj_CLWa66DRBH3fdT8fvoHhKc7LO8ryJkBjtFueEdf60aEs/s200/Kalender-Wedding2013-k.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFDO1dcjiEH7vbYwOJEmiA-m23cRu56AsW-3yhE2TRJVwYgXJYPYnBCvIgrcR-c0me5eyckdQc0f4IA7Ig7SlvmLBYFTZSekzLaPF3tlwF60uVqnndht3psLwwYFs1V63gIkihSx3ytA/s1600/Kalender-Wedding2013-l.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="November"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFDO1dcjiEH7vbYwOJEmiA-m23cRu56AsW-3yhE2TRJVwYgXJYPYnBCvIgrcR-c0me5eyckdQc0f4IA7Ig7SlvmLBYFTZSekzLaPF3tlwF60uVqnndht3psLwwYFs1V63gIkihSx3ytA/s200/Kalender-Wedding2013-l.jpg" width="141" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiHYp-VYB8q5gLcaHIInfcY4dC1QUf9R7n0yyQ_zgbmZPAf3HZb_kdLV4Lo1bHW6yX2x7XPKnl4kh26zzFh7ncRjf49qUxfIG9Um6q8VOW26JKIBAcx2DOt2RdxJGENtnQf9VMmHczVMs/s1600/Kalender-Wedding2013-m.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Desember"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiHYp-VYB8q5gLcaHIInfcY4dC1QUf9R7n0yyQ_zgbmZPAf3HZb_kdLV4Lo1bHW6yX2x7XPKnl4kh26zzFh7ncRjf49qUxfIG9Um6q8VOW26JKIBAcx2DOt2RdxJGENtnQf9VMmHczVMs/s200/Kalender-Wedding2013-m.jpg" width="141" /></a></li> </ul> <div class="clearfix"></div> <a class="prev" href="#">&lt;</a> <a class="next" href="#">&gt;</a> <div class="pager" id="pager"></div> </div> </div> 

Put the above html script code to the post content of your blog in the html editor mode!

2. Create the Javascript Code using jquery Caroufredsel and initialize class and id css that used on the html script code above. Make sure the template already use jquery.min.js as library master of all jquery! the Javascript Code would be like this:

<script src=https://agratitudesign-template.googlecode.com/svn/branches/carouFredSel/jquery.carouFredSel-6.2.1-packed.js type=text/javascript/> <script> //<![CDATA[ $(function() { $(#carousel ul).carouFredSel({ prev: { button : "#carousel .prev", key : "left" }, next: { button : "#carousel .next", key : "right" }, pagination: "#carousel .pager", scroll: 1000 }); }); //]]> </script> 

Just Put the above Javascript code to the last head of the blog template !

3. Create the CSS Style Script for Image Items Slider Caroufredsel. The adjustment of the CSS Style Script is absolutely necessary because it is depending on the character of the blog template, the content size of your blog, and the pixel size of the image items. look at the first demo below!


The pixel size of the thumbnail image items has made ??in the portrait orientation with height=200px and width=141px. This jquery image Slider Items Caroufredsel has made on the blog template by Artisteer, CSS Style script is like this:

#wrap-carousel { border: 1px solid #c7d8ad; width: 605px !important; text-align: center; } #carousel { text-align: center; width: 605px; height: 275px; background-color: #e5f2d6; overflow: hidden; position: relative; } #carousel ul { display: block; margin: 0 0 0 25px; padding: 0; position: absolute; } #carousel li { text-align: center; display: block; width: 165px; height: 250px; margin: 0; float: left; } #carousel li img { border: 1px solid rgb(204, 204, 204); background-color: white; box-shadow: none !important; padding: 6px ; display: block; float: left; margin: 0; position: absolute; } #carousel li:before { content: none !important;} .clearfix { float: none; clear: both; } #carousel .prev, #carousel .next { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0; text-indent: -999px; display: block; overflow: hidden; width: 15px; height: 21px; margin-left: 5px; position: absolute; top: 115px; } #carousel .prev { background-position: 0 0; left: 0px; } #carousel .prev:hover { left: 0px; } #carousel .next { background-position: -18px 0; right: 2px; } #carousel .next:hover { right: 2px; } #carousel .pager { text-align: center; top: 230px; position: relative; } #carousel .pager a { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px; text-decoration: none; text-indent: -999px; display: inline-block; overflow: hidden; width: 8px; height: 8px; margin: 0 5px 0 0; } #carousel .pager a.selected { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px; text-decoration: underline; } 

Put the above CSS Style script as the additional css to the last of the skin of your blog template !

The blog content of the template blog by Artisteer, the CSS Style on the content much inherits predefined, if you compared to the standard template blog by blog. For example, to disappear from the image list bullet style, should be done this way!

#carousel li:before {
content: none !important;}

The size of the thumbnail image items in landscape orientation was made ??with height=133px and width=150. The Jquery Image Slider Items Caroufredsel was created still on template blog by Artisteer. The width, height, padding, margin of the position of the image item must be adjusted. CSS Style Script as follows:

#wrap-carousel { border: 1px solid #c7d8ad; width: 605px !important; text-align: center; } #carousel { text-align: center; width: 605px; height: 186px; background-color: #e5f2d6; overflow: hidden; position: relative; } #carousel ul { display: block; margin: 0 0 0 20px; padding: 0; position: absolute; } #carousel li { text-align: center; display: block; width: 165px; height: 186px; margin: 0; float: left; } #carousel li img { border: 1px solid rgb(204, 204, 204); background-color: white; box-shadow: none !important; padding: 6px ; display: block; float: left; margin: 0; position: absolute; } #carousel li:before { content: none !important; } .clearfix { float: none; clear: both; } #carousel .prev, #carousel .next { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0; text-indent: -999px; display: block; overflow: hidden; width: 15px; height: 21px; margin-left: 5px; position: absolute; top: 70px; } #carousel .prev { background-position: 0 0; left: 0px; } #carousel .prev:hover { left: 0px; } #carousel .next { background-position: -18px 0; right: 2px; } #carousel .next:hover { right: 2px; } #carousel .pager { text-align: center; top: 140px; position: relative; } #carousel .pager a { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px; text-decoration: none; text-indent: -999px; display: inline-block; overflow: hidden; width: 8px; height: 8px; margin: 0 5px 0 0; } #carousel .pager a.selected { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px; text-decoration: underline; } 

As a comparison, for another example is implementation to the blog content, that the template by standard blogger, with the portrait orientation for image items slider as demo 1 on the standard blogger). Lets see the picture below!



CSS Style Script as follows:

#wrap-carousel { width: 570px !important; } #carousel { width: 570px; height: 275px; background-color: #e5f2d6; overflow: hidden; position: relative; } #carousel ul { list-style: none; display: block; margin: 0 17px; padding: 0 10px; position: absolute; } #carousel li { text-align: center; display: block; width: 165px; height: 250px; margin: 5px; float: left; } #carousel li img { border: 1px solid rgb(204, 204, 204); background-color: white; box-shadow: none !important; padding: 6px ; display: block; float: left; margin: 0; position: absolute; } .clearfix { float: none; clear: both; } #carousel .prev, #carousel .next { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0; text-indent: -999px; display: block; overflow: hidden; width: 15px; height: 21px; margin-left: 5px; position: absolute; top: 120px; } #carousel .prev { background-position: 0 0; left: 0px; } #carousel .prev:hover { left: 0px; } #carousel .next { background-position: -18px 0; right: 2px; } #carousel .next:hover { right: 2px; } #carousel .pager { text-align: center; top: 230px; position: relative; } #carousel .pager a { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px; text-decoration: none; text-indent: -999px; display: inline-block; overflow: hidden; width: 8px; height: 8px; margin: 0 5px 0 0; } #carousel .pager a.selected { background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px; text-decoration: underline; } 

Has noted here is how to remove the bullet style of the images list by inserting list-style: none; to the css id #carousel ul without requiring additional css id #carousel li: before (only for Artisteer template)

If you are still confused how to insert HTML, Javascript, and CSS scripts for the jquery Image Slider Items Caroufredsel, Lets see the article video above!

After successfully implementing the image lightbox evolution into the blog content, then I have though how to apply it to the joomla website. As you probably know a lot of extensions that provide convenience to you in making the image lightbox effect, but I think none more impressive than the lightbox evolution. Therefore, it is dedicated to you who use joomla to build your website as your choice, I will describe the implementation of image lightbox evolution to the joomla website automatically to all images of the joomla content.

Here I use the analogy of a blog in the applying the image lightbox evolution. This method is not going through the database but directly to the joomla templates system that has been used. For those of you who want to have the impressive image lightbox  effects, I will explain all to you as the results of my experiment in implementing image lightbox evolution into a Joomla website.

Suppose you have a lot of images in the content of your joomla website, and you want to make lightbox evolution effect to all images that lies to the content of your joomla. What I have pointed out before is inserting class=lightbox on each image tag. But right now we do it in a different way with a lightbox evolution effect that is very elegant if you apply it to your joomla website. Ok! Lets get started!

The things that you only need to do is inserting the scripts lightbox evolution into the index.php of the template that you use now. You can find the file of index.php of the template directly to the source of directory of your joomla website, or you can go through your joomla backend (administrator panel). You simply type on your browser : http://yourwebsite.com/administrator. If your joomla still in local server of your computer, just type : localhost/websitename/administrator. Lets see the picture below!

On the main menu of your joomla backend, select Extensions>Template Manager. Then you will find the Template Manager: Styles. In the column template please select the template that you are using in active now as I marked in red on the picture below!


You will be in customize template, and then you click on the Edit main page template, as I marked in red as shown like the left picture below! and next you will find index.php template as the purpose of this step, the place where we will insert the scripts code to make lightbox evolution to all images to the joomla content. Please have a look at first the script from the index.php of template, as the right picture below!


 
1. Inserting jquery.min.js to the index.php template, actually all the scripts code that will inserted must be put on the head of the template index.php.

<script src=http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.min.js></script> 

To make it safer, so that the link jquery.min.js can be working on your joomla, put the above script link at the beginning of the head. Make sure also that there is only one link javascript library master (jquery.min.js) that you use, to avoid the possibility of the problem that could be the cause of the lightbox evolution doesnt work. For more details lets see the picture below!

3. Press Ctrl+F on your browser, and type </head>, put the following scripts before the head of the index.php ends.

<script src=http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.lightbox.min.js></script> <link href=https://agratitudesign-template.googlecode.com/svn/branches/lightbox/themes/brown-gold/jquery.lightbox.css rel=stylesheet type=text/css> <!--[if lte IE 7]><link rel="stylesheet" href="https://agratitudesign-template.googlecode.com/svn/branches/lightbox/themes/brown-gold/jquery.lightbox.ie6.css" media="screen" /><![endif]--> <script src="http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.lightbox.js"></script> 

4. Initialize the lightbox to your joomla template and automatically add the class=lightbox to all images of the content joomla, following the script that you need to put next:

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery(.lightbox).lightbox(); }); </script> <script type="text/javascript"> jQuery(document).ready(function($){ $(.lightbox).lightbox(); $(a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)).addClass("lightbox"); }); </script> 

The placement of the scripts above in its implementation to the index.php template as shown like the picture below!


Once you save all the changes or additions of the scripts on the index.php your joomla template. Then if youve done it as right, it would be the all of images content of your joomla website will use lightbox wvolution effect that make your joomla website more impressive to show every image in full view. If there are less obvious, lets see the aricle video above!