[JS] Lightbox bestimmtes bild zeigen

Bububoomt · 18 Mai 2007

Gibts zufällig Leute die sich mit der lightbox auskennen? Also cih versuche es hinzubekommen, das beim Laden der Seite, die Lightbox mit einem bistimmten bild geladen wird, also ohne das der User auf ein Bild klickt. lede bekomme cih es nciht hin.

Habe auch schon gegoogelt, aber nichts dazu gefunden, vielleicht weiß hier ja wer, wie man das machen kann?

ice-breaker · 18 Mai 2007

in der initialize-methode steht folgendes:

Code:

 initialize: function() {
182 if (!document.getElementsByTagName){ return; }
183 var anchors = document.getElementsByTagName('a');
184 var areas = document.getElementsByTagName('area');
185
186 // loop through all anchor tags
187 for (var i=0; i<anchors.length; i++){
188 var anchor = anchors[i];
189
190 var relAttribute = String(anchor.getAttribute('rel'));
191
192 // use the string.match() method to catch 'lightbox' references in the rel attribute
193 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
194 anchor.onclick = function () {myLightbox.start(this); return false;}
195 }
196 }
197
198 // loop through all area tags
199 // todo: combine anchor & area tag loops
200 for (var i=0; i< areas.length; i++){
201 var area = areas[i];
202
203 var relAttribute = String(area.getAttribute('rel'));
204
205 // use the string.match() method to catch 'lightbox' references in the rel attribute
206 if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
207 area.onclick = function () {myLightbox.start(this); return false;}
208 }
209 }
210
211 // The rest of this code inserts html at the bottom of the page that looks similar to this:
212 //
213 // <div id="overlay"></div>
214 // <div id="lightbox">
215 // <div id="outerImageContainer">
216 // <div id="imageContainer">
217 // <img id="lightboxImage">
218 // <div style="" id="hoverNav">
219 // <a href="#" id="prevLink"></a>
220 // <a href="#" id="nextLink"></a>
221 // </div>
222 // <div id="loading">
223 // <a href="#" id="loadingLink">
224 // <img src="img/loading.gif">
225 // </a>
226 // </div>
227 // </div>
228 // </div>
229 // <div id="imageDataContainer">
230 // <div id="imageData">
231 // <div id="imageDetails">
232 // <span id="caption"></span>
233 // <span id="numberDisplay"></span>
234 // </div>
235 // <div id="bottomNav">
236 // <a href="#" id="bottomNavClose">
237 // <img src="img/close.gif">
238 // </a>
239 // </div>
240 // </div>
241 // </div>
242 // </div>
243
244
245 var objBody = document.getElementsByTagName("body").item(0);
246
247 var objOverlay = document.createElement("div");
248 objOverlay.setAttribute('id','overlay');
249 objOverlay.style.display = 'none';
250 objOverlay.onclick = function() { myLightbox.end(); }
251 objBody.appendChild(objOverlay);
252
253 var objLightbox = document.createElement("div");
254 objLightbox.setAttribute('id','lightbox');
255 objLightbox.style.display = 'none';
256 objLightbox.onclick = function(e) { var clickObj = Event.element(e).id; if ( clickObj == 'lightbox') { myLightbox.end(); } };
257 objBody.appendChild(objLightbox);
258
259 var objOuterImageContainer = document.createElement("div");
260 objOuterImageContainer.setAttribute('id','outerImageContainer');
261 objLightbox.appendChild(objOuterImageContainer);
262
263 // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
264 // If animations are turned off, it will be hidden as to prevent a flicker of a
265 // white 250 by 250 box.
266 if(animate){
267 Element.setWidth('outerImageContainer', 250);
268 Element.setHeight('outerImageContainer', 250);
269 } else {
270 Element.setWidth('outerImageContainer', 1);
271 Element.setHeight('outerImageContainer', 1);
272 }
273
274 var objImageContainer = document.createElement("div");
275 objImageContainer.setAttribute('id','imageContainer');
276 objOuterImageContainer.appendChild(objImageContainer);
277
278 var objLightboxImage = document.createElement("img");
279 objLightboxImage.setAttribute('id','lightboxImage');
280 objImageContainer.appendChild(objLightboxImage);
281
282 var objHoverNav = document.createElement("div");
283 objHoverNav.setAttribute('id','hoverNav');
284 objImageContainer.appendChild(objHoverNav);
285
286 var objPrevLink = document.createElement("a");
287 objPrevLink.setAttribute('id','prevLink');
288 objPrevLink.setAttribute('href','#');
289 objHoverNav.appendChild(objPrevLink);
290
291 var objNextLink = document.createElement("a");
292 objNextLink.setAttribute('id','nextLink');
293 objNextLink.setAttribute('href','#');
294 objHoverNav.appendChild(objNextLink);
295
296 var objLoading = document.createElement("div");
297 objLoading.setAttribute('id','loading');
298 objImageContainer.appendChild(objLoading);
299
300 var objLoadingLink = document.createElement("a");
301 objLoadingLink.setAttribute('id','loadingLink');
302 objLoadingLink.setAttribute('href','#');
303 objLoadingLink.onclick = function() { myLightbox.end(); return false; }
304 objLoading.appendChild(objLoadingLink);
305
306 var objLoadingImage = document.createElement("img");
307 objLoadingImage.setAttribute('src', fileLoadingImage);
308 objLoadingLink.appendChild(objLoadingImage);
309
310 var objImageDataContainer = document.createElement("div");
311 objImageDataContainer.setAttribute('id','imageDataContainer');
312 objImageDataContainer.className = 'clearfix';
313 objLightbox.appendChild(objImageDataContainer);
314
315 var objImageData = document.createElement("div");
316 objImageData.setAttribute('id','imageData');
317 objImageDataContainer.appendChild(objImageData);
318
319 var objImageDetails = document.createElement("div");
320 objImageDetails.setAttribute('id','imageDetails');
321 objImageData.appendChild(objImageDetails);
322
323 var objCaption = document.createElement("span");
324 objCaption.setAttribute('id','caption');
325 objImageDetails.appendChild(objCaption);
326
327 var objNumberDisplay = document.createElement("span");
328 objNumberDisplay.setAttribute('id','numberDisplay');
329 objImageDetails.appendChild(objNumberDisplay);
330
331 var objBottomNav = document.createElement("div");
332 objBottomNav.setAttribute('id','bottomNav');
333 objImageData.appendChild(objBottomNav);
334
335 var objBottomNavCloseLink = document.createElement("a");
336 objBottomNavCloseLink.setAttribute('id','bottomNavClose');
337 objBottomNavCloseLink.setAttribute('href','#');
338 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
339 objBottomNav.appendChild(objBottomNavCloseLink);
340
341 var objBottomNavCloseImage = document.createElement("img");
342 objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
343 objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
344 },

also wenn ich das nicht falsch sehe wird lightbox über folgenden befehl gestartet:

Code:

anchor.onclick = function () {myLightbox.start(this); return false;}

musst du eben noch das this mit dem richtigen objekt anpassen, also ein a-Tag anlegen und übergeben ud fertig

Bububoomt · 18 Mai 2007

Und fertig? du bist gut

Kein schimmer wie ich das anstellen soll

wenn ich einfach myLightbox.start('BILDURL') aufrufe, dann bekomme ich nur den dunklen Layer, aber mehr nicht. ich wäre ja schon froh, wenn ich 50% des scriptes verstehen würde

tleilax · 18 Mai 2007

Nene, die Bild-URL musst Du nicht nehmen. Du musst das entsprechende Objekt aus dem DOM-Baum übergeben.

Angenommen, Du hast dem Bild die Id 'foobar' gegeben, dann müsste das Ganze folgendermassen aussehen, wenn ich das im Code grad richtig gesehen habe:

Code:

var myLightbox = new Lightbox();
myLightbox.start( $('foobar') );

Das mit dem $() müsste klappen, da Lightbox ja auf Prototype basiert und die Funktion demzufolge auch für Dich zur Verfügung stehen dürfte.

Bububoomt · 18 Mai 2007

also den bildern gebe ich ja keine id, ich füge in den <a href nur ein

rel="lightbox[newpic]" ein.

und wenn ich bei der Initialisierung ein alert(this) hinzufüge, dann gibt er mir in der Meldung die Bildurl.

ice-breaker · 18 Mai 2007

tleilax schrieb:
Nene, die Bild-URL musst Du nicht nehmen. Du musst das entsprechende Objekt aus dem DOM-Baum übergeben.

Angenommen, Du hast dem Bild die Id 'foobar' gegeben, dann müsste das Ganze folgendermassen aussehen, wenn ich das im Code grad richtig gesehen habe:

Code:

var myLightbox = new Lightbox(); myLightbox.start( $('foobar') );

Das mit dem $() müsste klappen, da Lightbox ja auf Prototype basiert und die Funktion demzufolge auch für Dich zur Verfügung stehen dürfte.

öhm, lightbox erwartet doch ein a-Objekt und keine Bild-URL die die bild-url holt er sich dann aus dem a-tag wieder raus

tleilax · 18 Mai 2007

Upps, stimmt. Also müsste man dem Anker die Id geben.

Bububoomt · 18 Mai 2007

HTML:

myLightbox = new Lightbox();
myLightbox.start(document.getElementById('id4'));

also wenn ich das so mal mache, dann wird schon mal das soweit ausgeführt, als wenn er das bild anzeigen will, aber das bild wird net geladen

Bububoomt · 20 Mai 2007

bzgl. meines Postings zuvor, also so geht es im ie, aber halt im ff nicht. Dort wird das bild nicht geladen, habt ihr ne Idee??

[JS] Lightbox bestimmtes bild zeigen

Bububoomt

ohne Vertrauen

ice-breaker

return void

Bububoomt

ohne Vertrauen

tleilax

be forever curious

Bububoomt

ohne Vertrauen

ice-breaker

return void

tleilax

be forever curious

Bububoomt

ohne Vertrauen

Bububoomt

ohne Vertrauen