responsive Lightbox in web to date integrieren
Bitte melden Sie sich hier an um die erforderlichen Dateien herunterzuladen.
Sollten Sie noch nicht registriert sein klicken Sie bitte auf Registrieren.
<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[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]
Änderungen in der page.ccml
Suchen Sie in dieser Datei zunächst nach [code]<cc:if cond="¶.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="¶graph.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="¶.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.