Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.

Kategorie:
Webdesign

Tags:
jquery  click  fancybox  attr  a-tag  img-tag  class  iframe  event 



Seitwert - Jetzt kostenlos testen!

</ Jquery - per Click event Fancybox öffnen >


Per Click event ein Iframe oder Bild in der Fancybox zu öffnen ist gar nicht so schwer.

Wie es geht? So!

$("#test").click(function() {
    $.fancybox( {
        'href'         : 'test.php',
        'width'        : '90%',
        'height'       : '90%',
        'autoScale'    : false,
        'transitionIn' : 'none',
        'transitionOut': 'none',
        'type'         : 'iframe'    
    });
});

Das erste Beispiel ist für ein Iframe, für ein Bild ohne a-Tag hab ich folgendes Beispiel:

Zuerst der img-Tag.

<img class="pic" src="bild.jpg" title="Test"/>

Dann holen wir uns per click was in src und title steht und öffnen dann die Fancybox.

$(".pic").click(function() {
    var url = $(this).attr("src");
    var text = $(this).attr("title");
    $.fancybox( {
        'href'         : url,
        'transitionIn' : 'none',
        'transitionOut': 'none',
        'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + text + '</span>';
        }   
    });
});

Das wars auch schon, viel spaß beim Testen.

Permanentlink:
https://twus.info/243





Archiv

Oktober 2023

Januar 2023

Juni 2022

November 2020

Juni 2020

Mai 2020

November 2019

September 2019

Kategorie

Bilder

Bücher

Funstuff

Gewinnspiel

Haushaltstipps

Info

Musik

Nur so

Production

Rezepte

Tipps

Webdesign

Blogsuche


 
Tipp: Ich nutze