responsive Lightbox in web to date integrieren

Sie sind hier: Startseite » Anleitungen » Web- & Shop » jQuery Lightbox

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

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

Änderungen in global.ccml und config.ccml

Ö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">

Anpassungen in der Datei navigation.ccml

In der Datei navigation.ccml suchen Sie nach[googlecode]<cc:if cond="&topic.isshop">
<cc:include src="shop_header.ccml" common="1">
</cc:if>[/googlecode]und fügen in einer neuen Zeile darüber[googlecode]<link rel="stylesheet" type="text/css" href="<cc:print value="&magPopup.css.url">" />[/googlecode]ein.

Anschließend suchen Sie nach [googlecode]<script type="text/javascript" src="<cc:print value="&jquery.url">"></script>[/googlecode]und fügen in einer neuen Zeile darunter[googlecode]<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>
[/googlecode]

Hinzufügen der Klasse und Titel

Änderungen in der page.ccml
Suchen Sie in dieser Datei zunächst nach [code]<cc:if cond="&para.sidepicture.zoom.ispicture">[/code] und ersetzen das Nächste[googlecode]<a href[/googlecode] durch [googlecode]<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href[/googlecode]
Anpassung in der Datei paragraph_picture.ccml
Suchen Sie in dieser Datei zunächst nach [code]<cc:if cond="&paragraph.picture.zoom.ispicture">[/code] und ersetzen das Nächste[googlecode]<a href[/googlecode] durch [googlecode]<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href[/googlecode]
Änderungen in der paragraph_table.ccml
Suchen Sie in dieser Datei zunächst nach [code]<cc:if cond="&mycol.picture.zoom.ispicture">[/code] und ersetzen das Nächste[googlecode]<a href[/googlecode] durch [googlecode]<a class="mfpimg"<cc:if cond="&hugepic.properties.design.picture.title"> title="<cc:print value="&hugepic.properties.design.picture.title">"</cc:if> href[/googlecode]
Änderungen in link.ccml
Suchen Sie in dieser Datei zunächst nach [code]<cc:if cond="&link.isoffsite">[/code] und fügen hinter dem nächsten[code]target="_blank"[/code] direkt danach [googlecode] <cc:if cond="&para.properties.design.magnific.iframe"> class="mfpiframe"</cc:if>[/googlecode] ein. Bitte das erste Leerzeichen nicht vergessen!

Abschließend suchen Sie in der geöffneten Datei link.ccml nach [code]<cc:if cond="&link.ispicture">[/code] und ersetzen das Nächste[googlecode]href="<cc:print value="&mypicture.url">">[/googlecode] durch [googlecode]class="mfpimg" href="<cc:print value="&mypicture.url">">[/googlecode]

Hier die notwendigen Dateien zur Integration der jQuery Lightbox herunterladen.

Nach dem Herunterladen der zip-Datei entpacken Sie bitte den Ordner und kopieren die Dateien jquery.js, jquery_magnific_popup.js, style_magnific_effects.css und style_magnific_popup.css in den Ordner des Designs welches Sie anpassen möchten.

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.

© siquando-designs.de by KARO Webdesign & Entwicklung

Direkt-Navigation öffnen oder schließen

Wir (KARO Webdesign & Entwicklung) verwenden Cookies um unsere Website zu optimieren und Ihnen das bestmögliche Online-Erlebnis zu bieten. Mit dem Klick auf „Alle erlauben“ erklären Sie sich damit einverstanden. Weiterführende Informationen und die Möglichkeit, einzelne Cookies zuzulassen oder sie zu deaktivieren, erhalten Sie in unserer Datenschutzerklärung. | Impressum

Einstellungen