[GELÖST] Einzelnes Bild in Lightbox ausblenden

[irenehofer]

Ich habe im Forum bereits einmal Hilfe zu diesem Projekt erhalten (http://forum.jswelt.de/javascript/62053-caption-lightbox.html).
Nun habe ich als 2. Bild ein Plus (+) das erscheint. Dies soll darauf hinweisen, dass auf das Bild geklickt werden kann. Dieses Plus soll in der Animation angezeigt werden, aber in der Lightbox nicht. Wie kann ich nun das entsprechende Bild in der Lightbox ausblenden? Das Projekt findet sich übrigens hier: True Love

<div class="mtlsr-images-for-lightbox align-right">
			<div class="section" data-caption="Samira">
				<ul>
					<li class="circle">
						<a href="img/4.jpg">
							<img src="img/4.jpg" alt="Samira" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/4a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/4a.jpg">
							<img src="img/4a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/4b.jpg">
							<img src="img/4b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
... weitere Animationen)
</div>

 

[mikdoe]

* freigeschaltet *

 

[kkapsner]

Du darfst für das Plus einfach kein separates <li> machen, sondern das in das gleiche packen, in dem auch das Bild ist, zu dem es gehört.

 

[irenehofer]

Danke für deine Antwort. Eigentlich gehört es ja zum ersten Bild, es soll aber erst angezeigt werden, wenn mit der Maus darüber gefahren wird. Also hätte ich im HTML sowas:

<div class="mtlsr-images-for-lightbox align-left">
			<div class="section" data-caption="Samira">
				<ul>
					<li class="circle">
						<a href="img/1.jpg">
							<img src="img/1.jpg" alt="Samira" />
							<img class="plus" src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/1a.jpg">
							<img src="img/1a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/1b.jpg">
							<img src="img/1b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/1c.jpg">
							<img src="img/1c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/1d.jpg">
							<img src="img/1d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>
</div>

Wie würde das Ganze dann im CSS aussehen?

 

[kkapsner]

.mtlsr-images-for-lightbox li img.plus {
	display: hidden;
}
.mtlsr-images-for-lightbox li:hover img.plus {
	display: initial;
}

 

[irenehofer]

funktioniert - danke!
Ich habe allerdings noch 2 weitere Probleme:
1. Wenn ich die Seite auf dem Mobile aufmache, muss ich für die unteren 2 Bilder scrollen. Wenn die Lightbox geöffnet wird, wird das Bild zu weit oben angezeigt.
2. Bei den unteren beiden Lightboxes möchte ich einen dunklen Hintergrund statt einen weissen. Wie kann ich die 2 Lightboxes unterscheiden?

 

[kkapsner]

funktioniert - danke!

Bitte - gern geschehen.

1. Wenn ich die Seite auf dem Mobile aufmache, muss ich für die unteren 2 Bilder scrollen. Wenn die Lightbox geöffnet wird, wird das Bild zu weit oben angezeigt.

Vielleicht solltest du doch ein fertiges jQuery-Plugin verwenden... aber prinzipiell musst du in der Funktion, die die Lightbox öffnet entweder die aktuelle Scrollposition auslesen und dann die Position anpassen oder im CSS mit position: fixed arbeiten. Letzeres ist einfacher, aber dafür kann es psasieren, dass die Lightbox zu groß für das Fenster ist und man deswegen nicht mehr alles ansehen kann, da sich die Lightbox dann beim Scrollen nicht mehr mitbewegt.

2. Bei den unteren beiden Lightboxes möchte ich einen dunklen Hintergrund statt einen weissen. Wie kann ich die 2 Lightboxes unterscheiden?

Ich würde im HTML data-*-Attribute hinterlegen, die den Hintergrund steuern... z.B. indem CSS-Klassen entsprehend entfernt/hinzugefügt werden.

 

[irenehofer]

Danke für deine Hilfe. Das mit der CSS position:fixed hat ohne weitere Probleme funktioniert. Deshalb bleibt nur noch die Frage mit den Hintergründen. Damit bin ich leider etwas überfordert. Ich habe nun jeweils ein data-Attribut hinzugefügt. Die Frage für mich ist nun aber, wie ich die CSS-Klasse hinzufügen kann. Dies muss ich ja irgendwo im JavaScript tun, weil die Lightbox dort generiert wird... URL: True Love

<div class="mtlsr-images-for-lightbox align-left">
			<div class="section" data-caption="Samira" data-background="white">
				<ul>
					<li class="circle">
						<a href="img/1.jpg">
							<img src="img/1.jpg" alt="Samira" />
							<img class="plus plus-left" src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/1a.jpg">
							<img src="img/1a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/1b.jpg">
							<img src="img/1b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/1c.jpg">
							<img src="img/1c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/1d.jpg">
							<img src="img/1d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
<!-- WEITERE GALERIEN LINKS-->
</div>
<div class="mtlsr-images-for-lightbox align-right">
			<div class="section" data-caption="Samira" data-background="black">
				<ul>
					<li class="circle">
						<a href="img/4.jpg">
							<img src="img/4.jpg" alt="Samira" />
							<img class="plus plus-right" src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/4a.jpg">
							<img src="img/4a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/4b.jpg">
							<img src="img/4b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
<!-- WEITERE GALERIEN RECHTS -->
</div>

 

[kkapsner]

Ich würde das wieder in der gleichen Funktion machen, die auch schon die Caption einfügt:

			$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
				event.preventDefault();
				var $this = $(this);
				var big_image_href = $this.attr('href');
				var section = $this.parents(".section");
				var caption = section.data("caption");
				var backgroundColor = section.data("background");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				if (backgroundColor){
					lightbox.css("backgroundColor", backgroundColor);
				}
				lightbox.fadeIn();
				lightbox.append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				lightbox.find(".caption").text(caption);
				
				check_image_position();
			});

- wieder ungetestet.

 

[irenehofer]

Klasse - hat auf Anhieb geklappt! Tausend Dank!

 

[kkapsner]

Tausend Dank!

Bitte - gern geschehen.