Bitte melden Sie sich hier an um die erforderlichen Dateien herunterzuladen.

Sollten Sie noch nicht registriert sein klicken Sie bitte auf Registrieren .

Öffnen Sie die Datei global.ccml und fügen in der untersten Zeile dieser Datei

<cc:if cond="&site.properties.design.magnific.effect.number = 1"><cc:set obj="mfp.effect" value='mfp-fade'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 2"><cc:set obj="mfp.effect" value='mfp-zoom-in'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 3"><cc:set obj="mfp.effect" value='mfp-newspaper'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 4"><cc:set obj="mfp.effect" value='mfp-move-horizontal'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 5"><cc:set obj="mfp.effect" value='mfp-move-from-top'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 6"><cc:set obj="mfp.effect" value='mfp-3d-unfold'></cc:if>
<cc:if cond="&site.properties.design.magnific.effect.number = 7"><cc:set obj="mfp.effect" value='mfp-zoom-out'></cc:if>
<cc:asset src="style_magnific_popup.css" dst="stmfp.css" obj="magPopup.css">
<cc:asset src="jquery_magnific_popup.js" dst="jqmfp.js" obj="magPopup.js">

ein.

Anschließend suchen Sie in der geöffneten Datei global.ccml (meist Zeile 13) nach

<cc:asset src="jquery.js" dst="jq.js" obj="jquery" common="1" noparse="1">

und ersetzen diese Zeile durch

<cc:asset src="jquery.js" dst="jq.js" obj="jquery" noparse="1">



Öffnen Sie die Datei config.ccml und fügen in der untersten Zeile dieser Datei Folgendes ein:

<cc:property id="design.magnific.effect" caption="Lightbox Animationeffekt" folder="Lightbox by web2date-designs.de" targettype="site" type="combo" comboitems="Einblenden|Zoomen|Newspaper|Horizontale Bewegung|von oben einzoomen|dreidimensional|Herauszoomen" default="Einblenden">
<cc:property id="design.magnific.iframe" caption="Link in Lightbox öffnen" folder="Lightbox by web2date-designs.de" targettype="paragraph" type="boolean" default="0">
<cc:property id="design.picture.magnific.group" caption="Gruppe für die Lightbox" folder="Lightbox by web2date-designs.de" targettype="picture" type="string">
<cc:property id="design.picture.title" caption="Titel des Bildlinks" folder="Lightbox by web2date-designs.de" targettype="picture" type="string">

In der Datei navigation.ccml suchen Sie nach

<cc:if cond="&topic.isshop">
<cc:include src="shop_header.ccml" common="1">
</cc:if>

und fügen in einer neuen Zeile darüber

<link rel="stylesheet" type="text/css" href="<cc:print value="&magPopup.css.url">" />

ein.

Anschließend suchen Sie nach

<script type="text/javascript" src="<cc:print value="&jquery.url">"></script>

und fügen in einer neuen Zeile darunter

<script type="text/javascript" src="<cc:print value="&magPopup.js.url">"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$(".mfpimg").magnificPopup({
type: "image",
mainClass: '<cc:print value="&mfp.effect">',
gallery: { enabled: true }
})

$(".mfpiframe").magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: '<cc:print value="&mfp.effect">',
removalDelay: 100,
preloader: false,
fixedContentPos: false
});
})
/* ]]> */
</script>

Änderungen in der page.ccml
Suchen Sie in dieser Datei zunächst nach <cc:if cond="&para.sidepicture.zoom.ispicture"> und ersetzen das Nächste

<a href

durch

<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href


Anpassung in der Datei paragraph_picture.ccml
Suchen Sie in dieser Datei zunächst nach <cc:if cond="&paragraph.picture.zoom.ispicture"> und ersetzen das Nächste

<a href

durch

<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href


Änderungen in der paragraph_table.ccml
Suchen Sie in dieser Datei zunächst nach <cc:if cond="&mycol.picture.zoom.ispicture"> und ersetzen das Nächste

<a href

durch

<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href


Änderungen in link.ccml
Suchen Sie in dieser Datei zunächst nach <cc:if cond="&link.isoffsite"> und fügen hinter dem nächstentarget="_blank" direkt danach

 <cc:if cond="&para.properties.design.magnific.iframe"> class="mfpiframe"</cc:if>

ein. Bitte das erste Leerzeichen nicht vergessen!

Abschließend suchen Sie in der geöffneten Datei link.ccml nach <cc:if cond="&link.ispicture"> und ersetzen das Nächste

href="<cc:print value="&mypicture.url">">

durch

class="mfpimg" href="<cc:print value="&mypicture.url">">


Feedback

Sie haben Fragen, Anregungen oder eine Kritik? Dann nutzen Sie unsere Kommentar-Funktion. Natürlich würden wir uns auch über eine kleine PayPal-Spende freuen.

Michael schrieb am 16.10.2015 um 13:18  | Website

Hallo Thomas, funktioniert einwandfrei, lediglich bei dem Layout ultra harmonieren die jquery´s nicht. Nach dem Einbau der Lightbox funktioniert die obere Menüleiste nicht mehr ( klappt nicht mehr aus). Gibt es eine Lösung? Grüße Michael
Die jQuery Version der Magnific Lightbox ist für das Ultramenü zu neu. In dem Fall ist es empfehlenswert eine alternative Lightbox einzusetzen, die mit der jQuery Version 1.4.2 kompatibel ist.

Sven Rülke schrieb am 21.11.2013 um 01:35  | Website

Hallo Thomas,
unter Anleitungen / jquery Lightbox finde ich gar kein Download! Nur die Anleitung als solches! Mach ich noch irgend etwas falsch? Würde die neue Lightbox ganz gern in mein neues Design jake4a einbauen! www.svenruelke-berlin.de/demodesigns
Grüße Sven
Hallo Sven,
den Download habe ich kurzzeitig rausgenommen, da ich weitere Funktionen/Einstellungsmöglichkeiten hinzufügen wollte. Die Dateien schicke ich dir gleich per E-Mail.