Lecz ja chce żebym na kazdym obrazku mogl umiescic tytul, czyli musialbym miec cos takiego:
cały kod java script:
(function($) { $.fn.HFslider = function(params) { var hf_this = this; function Slider() { this.images = new Array(); this.width = hf_this.width(); //container width this.height = hf_this.height(); //container height this.slices = 10; // number of slices this.current_slide = 0; this.speed = 500; this.interval = 1000; this.nextSlide = function() { setTimeout(function() { HFslider.images[HFslider.current_slide].animSlices(); }, HFslider.interval); };//end nextImage }; var HFslider = new Slider(); //begin inputs if (typeof params != "undefined" && typeof params.slices != "undefined") { HFslider.slices = params.slices; } // end if HFslider.slice_width = HFslider.width / HFslider.slices; if (typeof params != "undefined" && typeof params.interval != "undefined") { HFslider.interval = params.interval; } // end if if (typeof params != "undefined" && typeof params.speed != "undefined") { HFslider.speed = params.speed; } // end if //end inputs function Slice(slide,left,width,src) { this.slide = slide; this.left = left; this.width = width; this.src = src; }//end Slice function Image(src) { this.src = src; this.slices = new Array(); var image = this; this.printSlices = function() { for(var i=0; i < image.slices.length; i++ ) { jQuery('<div></div>', { 'class': 'slice', 'style': 'left:' + image.slices[i].left + 'px; width:' + HFslider.slice_width + 'px; background: url('+ image.src +') no-repeat -' + image.slices[i].left +'px 0px;' }).appendTo(image.slices[i].slide); }// end for }// end printSlices this.animSlices = function() { var random_effect = Math.random(); for(var i=0; i < image.slices.length; i++ ) { var callback = null; if (i == image.slices.length-1) { callback = image.nextImage; } image.slices[i].slide.children('div:eq('+ i +')').animate({'width': '0px'},HFslider.speed + 100*i, callback); }// end for }// end animSlices this.nextImage = function() { var next_slide = HFslider.current_slide + 1; if (next_slide == HFslider.images.length) { next_slide=0; } hf_this.children('.slide').removeClass('current'); hf_this.find('.slice').css({'width': HFslider.slice_width +'px', 'height':'100%', 'opacity': '1'}); hf_this.children('.slide:eq('+ next_slide +')').addClass('current'); HFslider.current_slide = next_slide; HFslider.nextSlide(); }//end resetSlices }//end Image this.children('img').each(function() { HFslider.images.push(new Image($(this).attr('src'))); });// end each img if (HFslider.images.length) { //continue if there are some images this.css({ width : HFslider.width, height : HFslider.height }); this.html(''); //remove current images for (var i=0; i < HFslider.images.length; i++) { var slide_background_src = ''; if (i<HFslider.images.length-1) { slide_background_src = HFslider.images[i+1].src; } else { slide_background_src = HFslider.images[0].src; } var slide = jQuery('<div></div>', { id: 'slide'+i, 'class': 'slide', 'style': 'background: url('+ slide_background_src +') no-repeat;' }).appendTo(this); //create a new slide and add to container slide.css({ width : HFslider.width, height : HFslider.height }); var left = 0; // temp var for (var j=0; j < HFslider.slices; j++) { HFslider.images[i].slices.push ( new Slice (slide, left, HFslider.slice_width, HFslider.images[i].src) ); left+= HFslider.slice_width; }//end for j HFslider.images[i].printSlices(); } // end for i this.children('#slide0').addClass('current'); // first visible HFslider.nextSlide(); }//end if imgages length };//end HFslider }) (jQuery);