Popup-Bild (overlay/colorbox) in neuer Seite einbauen - modified responsive

[hypdwarf]

Hallo zusammen,

versuche bereits seit Stunden in einer neuen Seite ein Popup/Overlay-Bild einzubinden, wie es z.B. bei den Produktseiten der Fall ist.
Es will mir aber einfach nicht gelingen, da ich zugegebenermaßen auch noch nicht durchdrungen habe, wie es eigentlich funktioniert.

Shop-Version: 2.0.3.0
Template: modified responsive

Als Vorlage habe ich die nachfolgenden Zeilen der product_revies_info.html verwendet:

Code: PHP  [Auswählen]

<div class="pri_imagebox">
  <div class="pri_big_image">
    {if $PRODUCTS_IMAGE != ''}<a class="cbimages" title="{$PRODUCTS_NAME|onlytext}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" /></a>{/if}
  </div>
  <div class="pri_zoomtext">{#zoomtext#}</div>
</div>

Meine verstanden zu haben, dass es mit css/jss colorbox abläuft, aber wie muss ich die genannten Zeilen adaptieren, damit es funktioniert?

Ganz konkret: Habe das im Shop erläuterte Blog-Modul eingebaut und an diversen Stellen erweitert.
Ein Bild habe ich auch erfolgreich eingebaut und der Link auf das größere Bild funktioniert auch.
Es will mir aber nicht gelingen, dieses größere Bild in dem Popup/Overlay auszugeben (so wie bei den Produktseiten).

Habe schon etliche Beiträge im Forum durchgelesen und über Stunden experimentiert, aber den Durchbruch hatte ich leider noch nicht. Ist bestimmt nicht so schwer, wenn man es einmal verstanden hat... aber an dem Punkt bin ich eben leider noch nicht.

Von daher: Für eine kleine Starthilfe bin ich dankbar. Und dabei bitte seeehr laaangsam sprechen.

Besten Dank vorab und viele Grüße,
Christian

Linkback: https://www.modified-shop.org/forum/index.php?topic=38049.0

[karsta.de]

Eigentlich reicht es das Bild so einzufügen:

Code: PHP  [Auswählen]

<a href="{$tpl_path}img/bild_gross.png" target="blank" class="cbimages" title="Bildtitle"><img src="{$tpl_path}img/bild_klein.png" alt="Bildbeschreibung" /></a>
 

Oder nach deiner Vorlage:

Code: PHP  [Auswählen]

<div class="pri_imagebox">
  <div class="pri_big_image">
<a class="cbimages" title="Bildtitle" href="{$tpl_path}img/bild_gross.png"><img src="{$tpl_path}img/bild_klein.png" alt="Bildbeschreibung" /></a>
  </div>
  <div class="pri_zoomtext">{#zoomtext#}</div>
</div>
 

In diesem Fall sollten die anzuzeigenden Bilder im Templates-Ordner "img" hinterlegt sein.

Wird das Bild im Blogtext verwendet, empfiehlt es sich für die Bilder im root/images einen neuen Ordner für die Blogbilder anzulegen und dann so einzufügen: /images/blog/Bild.png.

BG kgd

[hypdwarf]

Hallo,

besten Dank für die Antwort zu so später Stunde.

Hmmm... genau davon war ich ja auch ausgegangen.

Habe deine Zeile eingefügt, aber im Ergebnis das gleiche Resultat. Daraufhin habe ich alles in der "blog.html" bis auf den nachfolgenden Code entfernt:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="blog"}
{config_load file="lang_`$language`.custom"}
{config_load file="lang_`$language`.section" section="blog"}

<a href="{$tpl_path}img/bild_gross.jpg" target="blank" class="cbimages" title="Bildtitle"><img src="{$tpl_path}img/bild_klein.jpg" alt="Bildbeschreibung" /></a>

Gleiches Ergebnis!

Muss in irgendeiner Datei vielleicht noch ein js/css eingebunden werden?

Viele Grüße,
Christian

[karsta.de]

Kannst du mir mal einen Link schicken.
Habe sowas schon mehrfach eingebaut und hat immer funktioniert.

BG kgd

[hypdwarf]

Kann ich dir hier im Forum irgendwie eine Nachricht senden?

Als Zusatzinfo:
Mir ist aufgefallen, dass der erzeugte HTML-Code/Ausgabe der beiden Dateien voneinander abweicht:
Die Produktinfo-Seite (funktioniert)

Code: PHP  [Auswählen]

<div class="pd_imagebox">
        <div class="pd_big_image">
                <a class="cbimages cboxElement" title="test" href="http://URL.DE/images/product_images/popup_images/BILD.jpg"><img itemprop="image" src="http://URL.DE/images/product_images/info_images/BILD.jpg" alt="test"></a>
        </div>
        <div class="zoomtext">Für eine größere Ansicht klicken Sie auf das Vorschaubild</div>
</div>

Die Blog-Seite (funktioniert nicht)

Code: PHP  [Auswählen]

<a href="http://URL.DE/templates/tpl_modified_responsive/img/bild_gross.jpg" target="_blank" class="cbimages" title="Bildtitle"><img src="http://URL.DE/templates/tpl_modified_responsive/img/bild_klein.jpg" alt="Bildbeschreibung"></a>

Meine jetzt nicht die unterschiedlichen Bild-Ordner, sondern >> class="cbimages" << und >> class="cbimages cboxElement" <<.

Im FF findet sich bei "Rechtsklick >> Element Untersuchen" in der funktionierenden Datei auch noch ein Hinweis auf "tpl_plugins.min.js" neben dem "<a href...>". In der nicht funktionierenden Datei nicht.

Viele Grüße,
Christian

[karsta.de]

Kann ich dir hier im Forum irgendwie eine Nachricht senden?

Unter meinem Bild auf den Brief klicken, Nachricht schreiben, abschicken, fertig.

BG kgd

[hypdwarf]

Mail ist unterwegs...

VG Christian

[hypdwarf]

Hallo zusammen,

dank der entscheidenden Hinweise von kgd konnte der Fehler gefunden werden.

Auflösung für den Fall, dass es ähnliche Probleme geben könnte:
Das ältere Blog-Modul lädt in der Datei "general_bottom.js.php" die Datei "jquery-1.2.6.js". Zuvor wurde allerdings bereits eine aktuellere jquery-Version geladen.

Die beiden Versionen nacheinander zu laden war wohl keine gute Idee
Alte jquery in der "general_bottom.js.php" entfernt und schon funktioniert es...

Ohhh mann, wie peinlich.

Erneut tausend Dank an kgd und viele Grüße,
Christian