Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Witam serdecznie. Jest sprawa z którą nie mogę sobie poradzić. Mianowicie chciałbym aby po na stronie cosmeticszone.pl po kliknięciu np "frezarki" z kategorii "akcesoria" wyświetliło się okno lightbox a w nim kilka zdjęć do wyboru obok siebie, abym mógł sobie wybrać które zostanie wyświetlone. Mam nadzieje że zobrazowałem to dość dokladnie. Dołączam zdjęcie jak to ma wyglądać.

Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Napisanie takiego skryptu z layerem to bardzo prosta sprawa. Przygotuj sobie taki layer, ukryj, po kliknięciu wyświetl i tyle :)
Sam Lightbox (bez modyfikacji) chyba nie umożliwia zrobienia z niego takiej przeglądarki jaką chcesz uzyskać. Możesz ewentualnie skorzystać z PrettyPhoto:
http://www.no-margin-for-errors.com/projects/prettypho...

pozdr.

Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Nie za bardzo wzabrac sie do tego zabrac... np gdy na stronie nacisne slowo "frezarki" to chcialbym zeby wyswietlilo liste zdjec dostepnych frezarek bez odswiezania i uzycia ajaxy bo nie napisalem strony z uzyciem php. No i fajnie gdyby to sie wyswietlalo w oknie lightbox. Pomozecie mi cos wymyslec?

Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Kamil Nowak:
Nie za bardzo wzabrac sie do tego zabrac... np gdy na stronie nacisne slowo "frezarki" to chcialbym zeby wyswietlilo liste zdjec dostepnych frezarek bez odswiezania i uzycia ajaxy bo nie napisalem strony z uzyciem php. No i fajnie gdyby to sie wyswietlalo w oknie lightbox. Pomozecie mi cos wymyslec?

Czemu uparłeś się tak na to LB? Nie możesz po prostu utworzyć warstwy, na której będziesz wyświetlał miniaturki a potem wyświetlać tę warstwę? Jak się uprzeć to całość w nagim jquery można napisać i z samej strony tylko wywołać odpowiednie operacje.
Funkcję wyświetlającą warstwę wyposaż w jeden argument - jakoś przecież musisz przekazać, że otworzyć mają się frezarki (albo rozpoznawaj to poprzez jakiś atrybut z przycisku, który klikasz). Niech wartość argumentu będzie np. nazwą klasy jaką dopiszesz zdjęciom (czyli tagujesz zdjęcia poprzez klasę). Możesz też tagować przez własny atrybut. Funkcja otwierająca okno niech wyszuka wszystkie elementy o zadanej klasie albo atrybucie i niech poprzez append doda je (po przeskalowaniu albo załaduj sobie również miniaturki) do tej warstwy. Podczas dodawania możesz sobie tak to napisać aby dalej obsługiwać LB jeśli chcesz.
Potem jeden przycisk wywoła funkcję z argumentem "frezarki", inny "tokarki" a jeszcze inny "szlifierki" czy co tam masz. Nie zapomnij też czyścić warstwy zanim coś do niej dodasz ;)

Jeśli nie chcesz ładować wszystkich zdjęć to wrzuć na stronę chociaż linki do nich a potem załaduj obrazki zanim je wyświetlisz.

Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Madrze piszesz ale czuje ze ten temat mnie przewyzsza bo nie wiem jak to zrobic... bylbym wdzieczny gdybys mogl mi w tym pomoc. ( strona musi obslugiwac lightbox poniewaz inne elementy jak kontakt czy o firmie wyswietlane sa wlasnie w LB. Jestes w stanir wesprzec mnie kodem rozwiazujacym moj problem? Pozdrawiam

Temat: [LIGHTBOX] wybór zdjęcia w oknie lightbox

Kamil Nowak:
Madrze piszesz ale czuje ze ten temat mnie przewyzsza bo nie wiem jak to zrobic... bylbym wdzieczny gdybys mogl mi w tym pomoc. ( strona musi obslugiwac lightbox poniewaz inne elementy jak kontakt czy o firmie wyswietlane sa wlasnie w LB. Jestes w stanir wesprzec mnie kodem rozwiazujacym moj problem? Pozdrawiam

Skoro to Ciebie przewyższa to nad tym projektem spędzisz raczej sporo czasu.
Poświęciłem chwilę i napisałem na szybko gniota (wiele elementów jest pisanych na wyrost, jak np. ubranie obrazków w divy - zrobiłem to celowo aby pokazać Ci jakie cuda można robić ;) ), który ilustruje, mam nadzieję w prosty sposób, o co chodziło mi w poprzednim poście

$(function(){

	var panel = $("<div></div>")

	.css({

		"background-color":"#fff",

		"width":"500px",

		"height":"300px",

		"margin-left":"auto",

		"margin-right":"auto",

		"padding":"5px"

	});

	$("body").append(

		$("<div></div>")

		.height($(window).height())

		.width($(window).width())

		.css({

			"position":"fixed", 

			"z-index":"1000",

			"top":"0px",

			"left":"0px",

			"padding-top":"100px",

			"background-color":"rgba(0,0,0,0.8)"})

		.append(panel)

	);

	//poniżej zamiast $("img") można wstawić np. klasę $(".frezarka")

	//albo ubrać to w ładną funkcję, o której pisałem, gdzie owa klasa

	//będzie argumentem

	$("img").each(function(){

		$("<div></div>")

		.css({

			"float":"left",

			"border":"3px solid #ddd",

			"margin":"1px"

		})

		.append(

			$("<img>")

			.attr("src", $(this).attr("src"))

			.css({

				"width":"50px",

				"height":"50px"

			})

		)

		.appendTo(panel)

	});

});

Oczywiście nie spodziewam się, że wykorzystasz ten kod. Zresztą nie pisałem go po to aby był gotowy do użycia w Twoim projekcie, ale aby Ci pokazać jak można to na szybko rozwiązać. Mam również nadzieję, że ta prowizorka pisana na kolanie natchnie Ciebie do napisania czegoś o niebo lepszego ;)

PS. napisałem to tak, że możesz obejrzeć działanie wrzucając ten kod po prostu na swoją stronę. Wystarczy, że będą na niej jakiekolwiek obrazki w znacznikach <img>.

Edytka dodaje:
Późno było i nie dopisałem jednej rzeczy. Jeśli bardzo chcesz się uprzeć na tym LB to zamiast podpinać pod "panel" podpinaj sobie pod warstwę w LB (oczywiście najpierw musisz LB otworzyć bez zdjęcia ;) ).Łukasz Z. edytował(a) ten post dnia 19.05.12 o godzinie 12:22