Forum für CMS/made simple

pWorker

probiert CMS/ms aus

Registriert: 20. Oktober 2016

Beiträge: 78

Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Hi,

mein Ziel war es, ein im Detail-News eingebundenes, im Vorhinein auf eine bestimmte Größe reduziertes (in meinem Fall durch CGSmartImage) Bild durch`s Draufklicken mit der Fancybox in Originalgröße zu öffnen. 

Default.tpl:Seiten-/Inhaltsspezifische Template Datei:

 Hier klicken, um den Code zum Kopieren zu markieren

<!-- Add fancyBox -->
<link rel="stylesheet" href="{root_url}/uploads/scripts/fancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="{root_url}/uploads/scripts/fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

[...]

{literal}<script type="text/javascript">
	$(document).ready(function() {
		$("a.fancybox").fancybox();
	});
</script>{/literal}

NEWS-Detail.tpl:

 Hier klicken, um den Code zum Kopieren zu markieren

[...]

{if $entry->fields.Image->value}
<a class="fancybox" href="{$entry->file_location}/{$entry->fields.Image->value}">
{cgsi_convert max_width="295"}
<img src="{$entry->file_location}/{$entry->fields.Image->value}" alt="{$entry->title|cms_escape:htmlall}">{/cgsi_convert}
</a>
{else}<img src="{root_url}/xxx/images/dummy-summary.jpg" alt="{$entry->title|cms_escape:htmlall}">{/if}

[...]

Durch diese Methode wird das Bild vom Feld "Image" vom Typ "Datei" in dem entsprechenden "uploads/news/"-Ordner mit der Fancybox verlinkt, sodass fortan die Bilder die über dieses Feld an Artikel mit diesem Template gekoppelt werden automatisch mit der fancybox pop up mäßig präsentiert werden können.

Mich hat`s etwas Zeit gekostet die richtige Methode zu finden und diese ist sehr einfach und verlässlich finde ich.

MfG

Beitrag geändert von pWorker (03. Dezember 2016 13:07)

owr_web

Server-Pate

Registriert: 16. Dezember 2010

Beiträge: 543

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Es gibt auch noch eine gleich einfache Lösung, wenn man das Gallery-Modul von Jos im Einsatz hat.

Grundsätzlich kann man ja dort sehr gut mit den diversen Stilen Spielen.
Ich habe immer zumindest eine erste Untergalerie als "Kopf" für die Bildergalerien, welche dann Unterordner dieser Galerie sind.
Somit kann ich auch interne Bilder oder andere einzel abzurufende Galerien in das Modul packen, ohne dass sie in der Bildergalerie aufscheinen.

Auch gibts bei mir eine Vorlage, die nichts drinnen hat als folgendes im Feld Vorlagenquelle:

 Hier klicken, um den Code zum Kopieren zu markieren

<div class="accessibility">Keine Bilder vorhanden</div>

Hat eigentlich nur den Sinn, dass wenn es die Galerie nicht gibt nicht im Text steht "0 Bilder" Dies ist bei mir in der Vorlagenliste als Standard eingestellt. Brauche ich so für den shop den ich grade implementiere. - Die Galerien selber kann man jeweils anders einstellen bzw. Subgalerien davon übernehmen normalerweise die im Elternelement eingestellte Vorlage.

Du hast grundsätzlich zwei Möglichkeiten bei den News:

Schritt1:
1) Du erstellst eine Vorlage die das von dir genannte stylesheet und den js-Teil drinnen hat
2) Das Vorlagenquelle bleibt "leer" du gibst also nur ein einfaches Leerzeichen ein (sonst lässt es sich nicht speichern

Schritt2:
1) Du erstellst eine Galerie für die News und gibst keine Bilder rein - Vorlage aus Schritt1 auswählen
2) Du erstellst einfach keine Galerie (dann musst du die Vorlage als Standard in der Vorlagenliste wählen)

Schritt3:
1) Bei Schritt2 Variante 1) du stellst an den Anfang des Newsdetailstemplate das {Gallery dir="????"} mit der Gallery für News
2) Bei Schritt2 Variante 2) du stellst an den Anfang des Newsdetailstemplate das {Gallery dir="IchhabkeineGaleriehier"} oder einen anderen Fantasienamen.

Den Rest einfach wie du oben beschrieben hast.

Du hast dadurch den Vorteil, dass du verschiedene Vorlagen verwenden und das ganze auch einfach auf andere Teile/Module ausweiten kannst ohne jedesmal Änderungen im Template vornehmen zu müssen.
Gleichzeitig verringerst du Template-Probleme mit js-Verstrickungen (doppelt geladen usw.).
Zusätzlich kannst du auch in der Gallery-Vorlage auswählen, ob das js im head oder vor /body geladen wird.

pWorker

probiert CMS/ms aus

Registriert: 20. Oktober 2016

Beiträge: 78

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Hey owr,

Vorteil bei mir ist, dass Du das im Prinzip ohne andere Module, außer dem News-M hinbekommst. Da ich die selben Bilder vorher als Vorschaubilder eingebunden habe, dürfen die nur in der Detailansicht zu fancybox Bildern werden. Da auch Frontend Submitting erlaubt ist, kann man so auch immer gut die Bilder nachverfolgen. Auf der Detailseite erkennt mein Script im default.tpl die page_id und lädt die einzelnen Contents optional/ den nicht benötigten (js)Code nicht.

Ist aber auch noch früh und ich muss bis Montag noch gefühlt 1000 Dinge in Ordnung bringen... falls mir noch die eine oder andere praktische Lösung entgegenkommt, poste ich die hier

owr_web

Server-Pate

Registriert: 16. Dezember 2010

Beiträge: 543

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Vorteil bei mir ist, dass Du das im Prinzip ohne andere Module, außer dem News-M hinbekommst

Drum auch mein erster Satz - mit dem Wörtchen "wenn"

Nur - nach deinem letzten Beitrag fehlt in deinem ersten Beitrag ein gravierender Teil:

Wenn ich das jetzt nachvollziehe:
default.tpl - Seitentemplate?

Auf der Detailseite erkennt mein Script im default.tpl die page_id und lädt die einzelnen Contents optional/ den nicht benötigten (js)Code nicht.

Wenn ich deinen ersten Beitrag lese lädt die css und das js auf jeder Seite deiner Webpage
Wenn ich deinen zweiten Beitrag lese hast du das irgendwie abgefangen - nur in den Erläuterungen fehlt das und eigentlich ist das dann ein gravierender Teil der im HowTo fehlt.

Oder hab ich jetzt einen Denkfehler?

pWorker

probiert CMS/ms aus

Registriert: 20. Oktober 2016

Beiträge: 78

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Eventuell falsch ausgedrückt...

Meine Seite besteht zum größten Teil aus einem Template, welches je nach ID der Seite bestimmten Content/ Script lädt beim Aufrufen. ...hat aber mit der Fancybox nichts zu tun.

Beispiel:
Dropdown Filter für CGUser Directory im default.tpl (Der Script wird weiter oben geladen):

 Hier klicken, um den Code zum Kopieren zu markieren

{if $page_id == 3 || $page_id == 51}

 {literal} <script type="text/javascript">
$(document).ready(function() {
$( "#select_branche_auswahl" ).selectmenu({
  icons: { button: "ui-icon-search" }
});
 
$( "#search_firmenname" ).click(function() {
  $( "#submit_firma" ).click();
});  
$( "#select_branche_auswahl" ).on( "selectmenuchange", function() { $('#submit_branche').click();} );
$("#input_ud_username").addClass("ui-widget ui-widget-content ui-corner-all");
});

</script>{/literal}
{/if}

Wozu sollte ich das auf jeder Seite aufrufen?

Beitrag geändert von pWorker (03. Dezember 2016 11:59)

owr_web

Server-Pate

Registriert: 16. Dezember 2010

Beiträge: 543

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Ne Frage ist eigentlich ob du css und js für die fancybox (default.tpl) immer aufrufst oder auf Seiten-ID einschränkst, bei welchen du die News anzeigst -

Wenn ja, wärs gut das im ersten Beitrag zu ergänzen.
Wenn nein - du lädst das ganze im Template auch dann mit wenn du es nicht brauchst. Das erzeugt regelmäßig unnötigen Traffic.

Das meinte ich damit.

pWorker

probiert CMS/ms aus

Registriert: 20. Oktober 2016

Beiträge: 78

Re: Dynamisch & einfach | Fancybox Effekt für News-Artikel Bilder

Hab ich geändert.

MfG