All Drupal projects that I have worked in the last time, are using large images on their home pages inside slideshows. This trend remains actual as these large images make an impact and rests one of the most essential part of a website.

To create slideshows in Drupal I needed to write only the css code for the slideshows from Views Slideshow module, in most of our Drupal themes.

The need for jQuery code completion occurred in a project that has a slideshow on front page, and using the same module it was necessary to implement an image gallery with a thumbnail carousel on other pages.

Adding Galleria, a JavaScript image gallery framework, was improper, because the needed design and functionality wasn’t compatible with the Galleria theme, but creating my own custom theme in this framework, adding custom theme functionality and css take also time. It's easier and faster to write a specific code for a concrete specification. So, I need to make this slider’s transformation:

The slideshow pager items are used to display 4 thumbnail images, clicking on the arrows displays next/previous 4 images. If the first/last image is displayed then click on the left/right arrow does nothing.

There is the initial html structure:<div class=”gallery”>... <div class="views-slideshow-controls-bottom> <div class=”views-slideshow-pager-fields”> <div class="views-slideshow-pager-field-item”>...</div> ... <div class="views-slideshow-pager-field-item”>...</div> </div> </div> </div>

The main steps of the algorithm are:

1. Wrapping all pager items in a div in order to move it to the left/right.
2. Grouping each 4 pager items.
3. Making active the first group of the 4 items.
4. Adding 2 new DOM elements, for the left/right arrow.
5. Clicking on the left arrow: if the first group is not active, then move the whole wrapper to the right, make active the previous group.
6. Clicking on the right arrow: if the last group is not active, then move the whole wrapper to the left, make active the next group.

Here are the code steps://1 $('.gallery') .find('.views-slideshow-pager-field-item') .wrapAll('<div class="slider-group-wrapper" />'); var $sliderWrapper = $('.slider-group-wrapper'), $items = $sliderWrapper.find('.views-slideshow-pager-field-item'); //2 for (var i = 0, len = $items.length; i < len; i += 4) { $items.slice(i, i + 4).wrapAll('<div class="slider-group"/>'); } //3 var $slides = $sliderWrapper.find('.slider-group'), $gallery=$('.gallery .views-slideshow-controls-bottom'); $slides.eq(0).addClass('is-active'); //4 $('<div></div>', { class:'arrow-left' }).appendTo($gallery); $('<div></div>', { class:'arrow-right' }).appendTo($gallery); //5 $('.arrow-left').click(function () { if ($('.is-active ').index()) { $sliderWrapper.animate({ left:"+=640" }); $('.is-active').removeClass('is-active').prev().addClass('is-active'); } }); //6 $('.arrow-right').click(function () { if (!$('.slider-group:last-child').hasClass('is-active')) { $sliderWrapper.animate({ left:"-=640" }); $('.is-active').removeClass('is-active').next().addClass('is-active'); } });

Use the comment section bellow to share your experience. Would love to find out about your challenges and solutions.

Tags: DrupalDevelopmentCheck this option to include this post in Planet Drupal aggregator: planetTopics: Tech & Development