Lightbox erscheinen lassen beim klicken ..

[krug_s]

Hallo

Weiss jemand wie ich hier eine Lightbox machen kann??
Ich bin seit 2.5 Stunden dran und es geht einfach nicht ...


Wenn man zb auf das Foto klickt, dann sollte es als Lightbox erscheinen ...ich habe einfach kein Plan wie weiter..


Hier der Link/ Code ...falls jemand mehr helfen kann, das wäre toll.


http://jsfiddle.net/v13wnp19/

Ich hoffe es gehört unter "JS&Ajax"
Vielen Dank

 

[SpiceLab]

Dazu fehlt noch ein zugehöriges jQuery-Plugin, wie z.B. Colorbox - a jQuery lightbox oder Fancybox

 

[krug_s]

Hmm ok ja,aber wie verbinde ich es dann zusammen ..habe zwar heruntergeladen aber wie ann ich die code verbinden?

 

[Sempervivum]

Mit dem Herunterladen ist es nicht getan. Du musst dir die Anleitung durchlesen, dort ist genau beschrieben, wie Du das Plugin integrierst. Z. B. hier für Fancybox2:
http://fancyapps.com/fancybox/#instructions

 

[SpiceLab]

Ausgehend von dem Download-File für Fancybox (v2.1.5):

• jQuery:

$(document).ready(function() {
       // Fancybox
       $('.fancybox').fancybox();
       // Data-Filter
       $('.tabs').find('a').click( function (e) {
          var theFilter = $(this).data('filter');   
          e.preventDefault();
          $('.tabs').find('a').removeClass('active');
          $(this).addClass('active');   
          $('.portfolio').find('li').show(); $('.portfolio').find('li').not(theFilter).hide();
     });
});

• Spezifizierte Selektoren innerhalb deines Stylesheets, damit es zu keinem Konflikt (Fehldarstellung) mit dem Fancybox-CSS kommt:

.wrap * {...}
...
.portfolio img {...}
...
.tabs a, .portfolio a {...}
.tabs a:hover, .portfolio a:hover {...}
...
.tabs [data-filter*="group"] {...}
.tabs [data-filter*="group"]:active {...}
.tabs [data-filter*="group"].active {...}

• HTML:

<div class="wrap">
  ...
   <ul class="portfolio">
     <li class="group-1">
        ...
         <a class="fancybox" href="http://farm3.staticflickr.com/2675/4029465977_e0ec2d53c6_z.jpg?zz=1">link</a>
        ...
    </li>
  </ul>
</div>

• Fertitsch

[edit]Tipp-Ex[/edit]​

 

[Sempervivum]

Hallo Spicelab,
da hast du dir ja viel Mühe gemacht. Ich habe auch etwas ausgearbeitet, und zwar um das Editieren des ganzen HTML zu vermeiden:

$(document).ready(function () {
$('.tabs').find('a').click(function (e) {
var theFilter = $(this).data('filter');

e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');

$('.portfolio').find('li').show(); $('.portfolio').find('li').not(theFilter).hide();

var imgs = [];
$elem = $(theFilter);
$elem.each(function(){
im = $(this).find("img").attr("src");
ti = $(this).find("h3").text();
imgs.push({href: im, title: ti});
});
$elem.each(function (idx) {
$(this).on("click", function () {
$.fancybox.open(imgs, idx);
});
});
});
});

Bzgl. des CSS bin ich zu den selben Ergebnissen gekommen.l

 

[SpiceLab]

Hallo Spicelab,
da hast du dir ja viel Mühe gemacht. Ich habe auch etwas ausgearbeitet, und zwar um das Editieren des ganzen HTML zu vermeiden

Fragt sich, wer von uns beiden mehr Mühe hatte, was Produktives zu Papier zu bringen

Ich bin lediglich auf die Rückfrage eingegangen, wie nun der vorhandene Code mit der Fancybox vereint wird

Vom Editieren des ganzen HTML-Codes kann kaum die Rede sein, in der überschaubaren Anzahl von Links noch class="fancybox" zu ergänzen und im href-Attribut die zugehörige Grafikdatei zu referenzieren, um diese originale Ausgangsform für weitere und/oder zukünftige Links zu übernehmen bzw. beizubehalten.

Übrigens offenbart dein Script zwei Macken:

1. Fancybox öffnet sich nur, wenn zuvor der Data-Filter ausgeführt wurde.
2. Fancybox verhält sich wie eine "Image Gallery" mit gruppierten Bildern - zeigt aber kein Caption (Image 1/n) an und findet kein Ende (Endlosschleife in Navigation).

Ob das so erwünscht ist...?!

[edit]Tipp-Ex[/edit]​

 

[krug_s]

Hallo und vielen Dank für die Beispiele

Ich habe die Lightbox eingebunden (http://lokeshdhakar.com/projects/lightbox2/)


Es funktioniert in Safari/Firefox (MAC) und es funktionier in IE/Firefox (WINDOWS) aber es funktioniert nicht mit Google Chrome weder auf einem Mac noch Windows.

Man sieht die Galerie auf jeder (unter)Seite ...zb bei "Start" oder "Kontakt" ...was gibt es für alternativen, ausser background: white (überdecken)


Danke

 

[SpiceLab]

Ein weißer Hintergrund für #gallerie-text scheint mir hier die einfachste, weil praktikabelste Lösung zu sein

Getestet im aktuellen Chrome unter Win7.

 

[krug_s]

Hallo SpiceLab

Ich glaube problem gefunden zu haben

Ich habe einfach " webkit-perspective: 1000; " auskommentiert (deaktivert) und es funktioniert.