jquery Slideshow / Gallery einbauen (Produktfotos)

[dragon_0000]

Habe die Awkward Slideshow Demo bei mir integriert.

Das einbauen in Veyton ist kein Problem:

Schritt 1 - Slideshow downloaden
Schritt 2 - JS Datei kopieren
jquery.aw-showcase.js ins xtFramework/library/jquery/ kopieren
Schritt 3 - js.php Verweis setzen
in der js.php den Verweis auf die js Datei setzen:

<script type="text/javascript" src="<?php echo _SYSTEM_BASE_URL . _SRV_WEB; ?>xtFramework/library/jquery/jquery.aw-showcase.js"></script>

Schritt 4 - CSS hinzufügen
CSS Datei (vom Download) in das /templates/xt_default/css/styleshee.css kopieren
(Alternativ kann man auch die Datei kopieren und einen @import verweis setzen)
Schritt 5 - Product.html bearbeiten
Folgenden 2 Teile in der /templates/xt_default/xtCore/pages/product.html einfügen
Schritt 5.1 Javascript einfügen ganz am Anfang

{literal}<script type="text/javascript">
$(document).ready(function()
{
  $("#showcase").awShowcase({
    width:   700,
    height:    470
  });
});
</script>
{/literal}

Schritt 5.2 - Div an gewünschter Position einfügen (z.b. ganz am Schluss der product.html Datei)

<div id="showcase" class="showcase">
{foreach name=aussen item=img_data from=$more_images}
    <div>    {img img=$img_data.file type=m_popup alt=$products_name}    </div>
{/foreach}
</div>

FERTIG!

*) Tipp: Die Slideshow funktioniert auch mit Thumbnails
*) Hinweis: Das ausgewählte Produkt muss natürlich mehrere Bilder besitzen

Mein Problem ist das er die Bilder untereinander und nicht wie in der Demo anzeigt.
Kann mir jemand helfen?
Hat einen Hinweis was ich falsch gemacht habe?
Oder hat ein ähnliche Slideshow/Gallerie bereits erfolgreich eingebaut?

[Ballonsupermarkt]

Hast du mal geschaut, ob nicht evtl. CSS vom Shop irgendwelche CSS-Eigenschaften für die DIVs von der Gallerie überschreibt?

[dragon_0000]

An dem dürfte es eher nicht liegen da die CSS Elemente gänzlich andere Elementnamen haben.
Solche Probleme habe ich aber schon mit vielen (unzähligen) anderen Jquery Galerien / Slideshow / Colorbox gehabt
Vielleicht kannst du oder jemand andere mal testen ob es bei ihm klappt ;-)

[amilo]

Hi,

in 5.1 fügst du die Scriptdatei innerhalb des Body Tags ein. Die gehört aber ebenfalls in den Head. Dafür eine eigene .js erstellen in ../jquery und diese dann auch über die js.php einbinden.

MfG. Hansen

[dragon_0000]

Zitat von amilo

Hi,

in 5.1 fügst du die Scriptdatei innerhalb des Body Tags ein. Die gehört aber ebenfalls in den Head. Dafür eine eigene .js erstellen in ../jquery und diese dann auch über die js.php einbinden.

MfG. Hansen

Ja ... deswegen verwende ich ja die {literal} Funktion von Smarty die knallt mir das das Javascript in den Head bereich.
Vorteil: Der Quellcode steht dann nur auf der 1 Seite wo ich Ihn benötige (in diesen Fall product.html) und wird nicht auf jeder Seite neu geladen.

Testweise habe ich es natürlich auch am Ende der js.php eingetragen jedoch mit gleichen (negativen) Erfolg.

[amilo]

Hmmm, hast du denn mal überprüft ob die beiden Scripts im Head auch richtig geladen werden?

Und warum gibt du dem div die Klasse .showcase und die id #showcase.
Das ist auf der How to implement Seite auch nicht gemacht worden (In der Demo schon)?

MfG. Hansen

[dragon_0000]

Zitat von amilo

Hmmm, hast du denn mal überprüft ob die beiden Scripts im Head auch richtig geladen werden?

Und warum gibt du dem div die Klasse .showcase und die id #showcase.
Das ist auf der How to implement Seite auch nicht gemacht worden (In der Demo schon)?

MfG. Hansen

Jep, ist in der Demo auch schon so drinnen (also mit id="showcase" class="showcase")
Aber ich denke du hast mich auf den richtigen Weg gebracht - den anscheinend hab ich bei der Javascript Funktion im {literal} Teil etwas falsch gemacht den nachdem ich den überarbeitet habe funktioniert es jetzt.
Auf jedenfall danke.

Werd jetzt noch probieren ob es auch mit den Thumbnails funktioniert.