strona na warstwie jak slimbox

[paluchgda]

Mam stronę z ofertami z których można przejść do opisu szczegolowego. chcialbym aby szczegoly kazdej kliknietej oferty wyswietlaly sie tak jak zdjecia w galerii slimbox czyli na takim czarnym tle.

i tak:

- kod js

//SETTING UP OUR POPUP

//0 means disabled; 1 means enabled;

var popupStatus = 0;

//loading popup with jQuery magic!

function loadPopup(){

//loads popup only if it is disabled

if(popupStatus==0){

$("#backgroundPopup").css({

"opacity": "0.7"

});

$("#backgroundPopup").fadeIn("slow");

$("#popupContact").fadeIn("slow");

popupStatus = 1;

}

}

//disabling popup with jQuery magic!

function disablePopup(){

//disables popup only if it is enabled

if(popupStatus==1){

$("#backgroundPopup").fadeOut("slow");

$("#popupContact").fadeOut("slow");

popupStatus = 0;

}

}

//centering popup

function centerPopup(){

//request data for centering

var windowWidth = document.documentElement.clientWidth;

var windowHeight = document.documentElement.clientHeight;

var popupHeight = $("#popupContact").height();

var popupWidth = $("#popupContact").width();

//centering

$("#popupContact").css({

"position": "absolute",

"top": windowHeight/2-popupHeight/2,

"left": windowWidth/2-popupWidth/2

});

//only need force for IE6

$("#backgroundPopup").css({

"height": windowHeight

});

}

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){

//LOADING POPUP

//Click the button event!

$("#button_popup").click(function(){

//centering with css

centerPopup();

//load popup

loadPopup();

});

//CLOSING POPUP

//Click the x event!

$("#popupContactClose").click(function(){

disablePopup();

});

//Click out event!

$("#backgroundPopup").click(function(){

disablePopup();

});

//Press Escape event!

$(document).keypress(function(e){

if(e.keyCode==27 && popupStatus==1){

disablePopup();

}

});

});

- kod html

czyli wyswietlanie oferty itd z buttonem <input id=\"button_popup\" type=\"button\" value=\"Więcej > \" class=\"button_submit\" />

- na koncu strony z ofertami jest div ktory wyswietlany jest po kliknieciu z button

<div id="popupContact">

<a id="popupContactClose">ZAMKNIJ</a>

<h1>Title of our cool popup, yay!</h1>

<p id="contactArea">

opis oferty

</p>

</div>

<div id="backgroundPopup"></div>

i teraz problem

- wyswietlanie diva dziala tylko w pierwszej ofercie. tak jaby nie mozna bylo wywolac tego w dalszych ofertach.

- jak zrobic aby wyswietlac szczegoly oferty w tym divie popupContact bo teraz wychodzi na to ze tresc diva jest stala i to jeszcze na tej samej stronie co lista ofert

[Kangel]

Jak prawdopodobnie wiesz, jeden atrybut id może zostać przypisany jedynie do jednego elementu strony, zatem nazywanie wszystkich inputów "button_popup" jest zamachem na ustalenia specyfikacji ;-)

Zawartość #popupContact możesz zróżnicować na wiele sposobów, np. zmieniać dynamicznie jego zawartość za pomocą JavaScript DOM i XMLHttpRequest.

Innym sposobem jest utworzenie osobnego diva dla każdego <input />... Z jednej strony będzie to sposób prostszy i niewymagający PHP, z drugiej jednak strony - zajmie to sporo czasu (i wymagać będzie ciągłego kopiuj-wklej w razie zmiany treści/ilości ofert); no i zajmie zdecydowanie za dużo linijek kodu ;-)