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.
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.
<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]
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.