[JavaScript] Pobranie obrazka z diva Opcje

[renault12]

Hej , mam taki problem, ze uzywam slidera na mojej stronie, wszystko dobrze dziala, obrazki sie zmieniaja tak jak powinny, za pomocą kodu html:

[HTML] pobierz, plaintext 
<div id="slider" class="HFslider">
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
[HTML] pobierz, plaintext 

Lecz ja chce żebym na kazdym obrazku mogl umiescic tytul, czyli musialbym miec cos takiego:

[HTML] pobierz, plaintext 
<div id="slider" class="HFslider">
<div id="pic" style="background-image:url(2.jpg);>tekst</div>
<div id="pic" style="background-image:url(3.jpg);>tekst</div>
<div id="pic" style="background-image:url(4.jpg);>tekst</div>
</div>
[HTML] pobierz, plaintext 

cały kod java script:

[JAVASCRIPT] pobierz, plaintext 
(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);
[JAVASCRIPT] pobierz, plaintext 

[justysia90]

Raczej tego nie zrobisz w tym pluginie za dużo przeróbek i szkoda czasu w/g mnie - od siebie mogę polecić http://bxslider.com/ powinien spełnić wszystkie Twoje wymagania