Problema jQuery ! [Rezolvat]

[miber]

Bun am lucrat la un script dar am o problema, nu imi pune backgroundul pentru fiecare div cel din atribut(data-overlay-colour), adica imi ia primul background si il pune si la rest-ul div-urilor chiar daca la altele backgrundul din atribut difera.

Script-ul este asa.

Code: Select all

(function dataImage() {

	jQuery('*').each(function() {

		if (jQuery(this).data('image') === true) {

			var image = jQuery(this).data('image-src');
			jQuery(this).addClass('backstretch-active');
			jQuery(this).backstretch(image);

		}

		if (jQuery(this).data('overlay') === true) {

			jQuery('.backstretch-active .backstretch').append('<div class="backstretch-holder-overlay"></div>');

			jQuery('.backstretch-active').each(function() {
				jQuery('.backstretch-active .backstretch .backstretch-holder-overlay').css('background-color', function() {
					return jQuery('.backstretch-active').data('overlay-colour')
				});
			});
			

		}

	});

})();

Cod HTML

Code: Select all

<div class="top-pane top-pane-bg" data-image="true" data-image-src="{PATH}/images/headers/header-one.jpg" data-overlay="true" data-overlay-colour="rgba(103, 65, 114, 0.7)">

Iar al 2 lea div care are o poprietate diferita.

Code: Select all

<div class="footer-container-wrapper" data-image="true" data-image-src="{PATH}/images/headers/header-one.jpg" data-overlay="true" data-overlay-colour="rgba(0, 0, 0, 0.7)">

Cel de-al doilea div isi ia data-overlay-colour de la primul si il pune ca background-color in div-ul ".backstretch-holder-overlay"

Pe mine ma intereseaza sa puna backgroundul corect pentru fiecare in parte, am intercat de mi-au sarit capacele.

Va multumesc.

[The Kalu]

Iti trebuie id diferit "#div-1"/ "#div-2".

[miber]

Iti trebuie id diferit "#div-1"/ "#div-2".

Nu vreau asa ceva, vreau ceva global gen cum este pluginul de dropdown de la bootstrap.

[miber]

Rezolvat.

Pentru cei care au nevoie pe viitor.

code.js | Afiseaza codul

(function pane() {

	var hasImage = jQuery('[data-image]').data('image'),
		hasOverlay = jQuery('[data-overlay]').data('overlay'),
		hasAnimation = jQuery('[data-animation]').data('animation');

	if (hasImage === true) {

		jQuery('*[data-image]').each(function(i, element) {

			var url = jQuery(element).data('image-src');

			jQuery(element).addClass('backstretch-active');
			jQuery(element).backstretch(url);
			jQuery(element).removeAttr('data-image');
			jQuery(element).removeAttr('data-image-src');
			jQuery(element).removeAttr('image-x');
			jQuery(element).removeAttr('image-y');

		});

	}

	if (hasOverlay === true) {

		jQuery('*[data-overlay]').each(function(i, element) {

			var color = jQuery(element).data('overlay-color');

			jQuery(element).children('.backstretch').append('<div class="backstretch-holder-overlay"></div>');
			jQuery(element).children('.backstretch').children('.backstretch-holder-overlay').css('background', color);
			jQuery(element).removeAttr('data-overlay');
			jQuery(element).removeAttr('data-overlay-color');

		});

	}

})();