I attempted to create a mosaic effect on my carousel
similar to this example:
, but not exactly like this. I want to include control buttons for next and previous, and have images in HTML tag.
However, my attempt is not working and I need help.
This is my work: Jsfiddle
I have only created the next button, for the previous button it will be similar except I will replace position++ with position--
Jquery Code:
$(function(){
var $carroussel = $('#carrousel');
var $carrousselhover = $('#carrousel .hover');
$carroussel.append('<div class="controls"> <span class="Previous"> <img src="http://s27.postimg.org/ip6n42rn3/previous.png"> </span> <span class="Next"> <img src="http://s27.postimg.org/6yspmoyun/next.png"> </span></div>');
var $nbrimage = $('#carrousel img').length - 1;
var $img = $('#carrousel img');
var width = 700;
var height = 200;
var horizontal_pieces = 8;
var vertical_pieces = 6;
total_pieces = horizontal_pieces * vertical_pieces;
var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;
var vertical_position = 0;
elements = new Array();
var count ;
count = 0;
var $position;
$position = 0;
$carroussel.width(width).height(height);
var $currentImage = $img.eq($position); // First image
var listimage = $('#carrousel ul li');
var tempEl;
$('.controls .Next').click(function(){
if($position < $nbrimage)
{
for (i = 0; i < total_pieces; i++)
{
$currentImage = $img.eq($position);
tempEl = $('<span class="hover" id="hover-' + i + '"></span>');
var horizontal_position = (i % horizontal_pieces) * box_width;
if(i > 0 && i % horizontal_pieces == 0)
{
vertical_position += box_height;
}
tempEl.css({'background-position': '-' + horizontal_position + 'px -' + vertical_position + 'px',
'background-image': 'url('+$img.eq($position).attr('src')+')'});
$img.eq($position).remove();
listimage.eq($position).append(tempEl);
elements.push(tempEl);
}
$position++;
$carroussel.css({'background-image': 'url('+$img.eq($position).attr('src')+')'});
$('#carrousel .hover').width(box_width).height(box_height);
setInterval(toggleDisplay,10000);
}
else
{
$position = $nbrimage;
}
function toggleDisplay()
{
if(count >= total_pieces)
{
clearInterval(0);
}
else
{
var tempEl = elements[count];
var opacity = tempEl.css('opacity');
if(opacity == 0)
{
tempEl.animate({ opacity: 1 })
}
else
{
tempEl.animate({ opacity: 0 })
}
count = (count + 1);
}
}
});
});
Css Code:
#carrousel{
position:relative;
margin:0 auto;
z-index:2;
}
#carrousel ul li{
position:absolute;
top:0px;
left:0px;
list-style-type:none;
}
#carrousel .hover{
}
.controls
{
position:relative;
height:200px;
width:700px;
margin:0 auto;
z-index:1;
}
.controls .Next {
position:absolute;
right:4px;
top:30px;
}
.controls .Previous{
position:absolute;
left:4px;
top:30px;
}
.controls span:hover
{
cursor:pointer;
}