[JavaScript] Space Gallery, Ładowanie kilku sliderów o róznej liczbie zdjęć Opcje

[starter91php]

Witam, mam pewien problem ze skryptem galerii Space Gallery. Chodzi o to, że jeśli w moim pliku index.php mam odpalone kilka instancji tego skryptu. I wszystko jest okej, dopóki każda z tych instancji pracuje na tej samej liczbie zdjęć.
W przypadku, gdy np jeden slider będzie operował na 3 zdjęciach, a kolejny na 2 - to poprawnie działały będa tylko slidery z liczbą zdjęć, z jaką został załadowany ostatni slider (w tym wypadku 2). Przykład działania na: http://www.eyecon.ro/spacegallery/#about

Mój plik layout.js
(W folderze images są dwa zdjęcia, w images2 są trzy zdjęcia)

[JAVASCRIPT] pobierz, plaintext 
(function($){
	var initLayout = function() {
		var hash = window.location.hash.replace('#', '');
		$('.spacegallery').spacegallery({loadingClass: 'loading'}); 
	};
 
	EYE.register(initLayout, 'init');
})(jQuery)
[JAVASCRIPT] pobierz, plaintext 

Takim sposobem poprawnie inicjalizują sie animacje tylko dla liczby zdjęć z ostatniej galerii (jak już wspomniałem). Z drugiej jednak strony, jesli custom.css zmienię z:

[CSS] pobierz, plaintext 
#myGallery {
	width: 100%;
	height: 300px;
}
#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}
[CSS] pobierz, plaintext 

na:

[CSS] pobierz, plaintext 
#myGallery {
	width: 100%;
	height: 300px;
}
#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}
 
#myGallery1 {
	width: 100%;
	height: 300px;
}
#myGallery1 img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}
 
 
#myGallery2 {
	width: 100%;
	height: 300px;
}
#myGallery2 img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}
[CSS] pobierz, plaintext 

a layout.js w ten sposób:

[JAVASCRIPT] pobierz, plaintext 
(function($){
	var initLayout = function() {
		var hash = window.location.hash.replace('#', '')
 
		$('#myGallery').spacegallery({loadingClass: 'loading'}); 
		$('#myGallery1').spacegallery({loadingClass: 'loading'}); 
		$('#myGallery2').spacegallery({loadingClass: 'loading'}); 
 
 
	EYE.register(initLayout, 'init');
})(jQuery)
[JAVASCRIPT] pobierz, plaintext 

To wtedy wszystkie trzy wyświetlą się poprawnie, jednak wtedy już czwarta w żadnej konfiguracji nie działa. Nie uśmiecha mi się tworzenie nowego ID w pliku .css dla każdej galerii (nie wiem, ile ich będę w danym momencie wyświetlał) , a jednak chciałbym, żeby działały one poprawnie dla wszystkich konfiguracji zdjęciowych.



Spora zmiana tematu. Bump!

Ten post edytował starter91php 11.04.2012, 09:45:25

[Kostek.88]

Musisz zrobić nieco na odwrót, tzn. nadać jedną klasę dla wszystkich DIV-ów i ustalić jeden kod CSS. Przykład:

[CSS] pobierz, plaintext 
.myGallery {
    width: 100%;
    height: 300px;
}
 
.myGallery img {
    border: 2px solid #52697E;
}
 
a.loading {
    background: #fff url(../images/ajax_small.gif) no-repeat center;
}
[CSS] pobierz, plaintext 

Następnie nadać różne ID dla galerii i oczywiście nie przejmować się CSS-em, bo wyżej ustaliliśmy, że wszystkie obiekty z klasą "myGallery" mają ten sam styl. Klasy mogą się powtarzać.

[HTML] pobierz, plaintext 
<div id="gallery1" class="myGallery"></div>
<div id="gallery2" class="myGallery"></div>
<div id="gallery3" class="myGallery"></div>
<div id="gallery4" class="myGallery"></div>
[HTML] pobierz, plaintext 

A teraz java script:

[JAVASCRIPT] pobierz, plaintext 
(function($){
    var initLayout = function() {
    var hash = window.location.hash.replace('#', '');
 
    $('#gallery1').spacegallery({loadingClass: 'loading'});
    $('#gallery2').spacegallery({loadingClass: 'loading'});
    $('#gallery3').spacegallery({loadingClass: 'loading'});
    $('#gallery4').spacegallery({loadingClass: 'loading'});
 
    EYE.register(initLayout, 'init');
})(jQuery)
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Kostek.88 13.04.2012, 08:28:02