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. [42 KB]

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.

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

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

KARO Webdesign & Entwicklung (siquando-designs.de) verwendet Cookies, um die Dienste st?ndig zu verbessern und bestimmte Features zu erm?glichen. Indem Sie hier fortfahren, stimmen Sie dieser Verwendung zu. Mehr erfahren