Slideshow/Bildergalerie auf Produktseite

flollo · #1 (**permalink**) 07.12.2007, 12:58

Hallo,

ich würde gern eine Slideshow oder Bildergalerie auf der Produktseite (also nicht das Popup, sondern auf der Seite selbst) machen - am liebsten mit Ajax o.ä. ohne Reload der Seite. Pfeiltasten o.ä. zum vor- und rückblättern der Bilder.

Idealerweise sind die Bilder auch noch mit den Attributen verknüpft. Also bei Auswahl eines gelben Artikels wird das gelbe Bild angezeigt.

Natürlich soll die Erstellung der Slide-Show / Bilder-Galerie automatisch gehen mit Bezug auf die bestehenden Bilder des Artikels, nicht für jeden Artikel einzeln zu bauen.

Kann jemand weiterhelfen? Tricks/Anleitung zur Umsetzung (bin aber nicht so der Programmier-Held)? Oder kennt jemand eine Site oder einen Modul-Ersteller, der derartiges schonmal gemacht hat. Kann auch ein paar Euro kosten. Hauptsache schick :-)

Ich habe mir die virtuellen Hacken abgelaufen bei den kommerziellen/freien Modul-Anbietern, aber nix gefunden - nicht mal in die Richtung (nur einer, der Bilder zu Attributen aufruft, aber das ist zu wenig).

Besten Dank schonmal!

philipp1988 · #2 (**permalink**) 07.12.2007, 13:04

machs einfach ganz easy :P...

random 5 produkte aus der datenbank holen..

und dann mit <marquee> </marquee> ^^ sie zum laufen bringen :P

jua · #3 (**permalink**) 07.12.2007, 13:06

such mal nach itratos

flollo · #4 (**permalink**) 07.12.2007, 18:58

Zitat:

Zitat von philipp1988

machs einfach ganz easy :P...

random 5 produkte aus der datenbank holen..

und dann mit <marquee> </marquee> ^^ sie zum laufen bringen :P

Besten Dank. Ich kann sicherlich googeln wie das genau geht. Oder hat jemand Muße, mir kurz ein paar Zeilen aufzuschreiben? (1000 Dank)

Insbesondere: Ich möchte ja nicht irgendwelche Fotos random schicken, sondern alle Fotos des konkreten Artikels möglichst in vorgegebener Reihenfolge (aber dabei variiert die Anzahl der Fotos von Artikel zu Artikel)

flollo · #5 (**permalink**) 07.12.2007, 19:03

Zitat:

Zitat von jua

such mal nach itratos

Danke. Aber diese Darstellung passt wohl nicht so ganz auf jede Seite. Werde mich mal beschäftigen, vielleicht kann man das anpassen.

Soweit ich gesehen habe, lassen sich aber auch bei dem Skript nicht die Bilder auf einen bestimmten Artikel begrenzen. Oder hat da jemand eine Idee?

doersam · #6 (**permalink**) 08.12.2007, 09:22

Meint Ihr so etwas:
http://www.abalico.de/shop_new/produ...xis-10ml1.html

Baue das mal in deine Produkt-Info Template ein:

Code:

      {if $PRODUCTS_IMAGE_1 != ''}
      <table name="pic1" id="pic1" border="0" cellspacing="0" cellpadding="0">
        <tr title="hide_pic1">
          <td width="20" align="left" valign="middle">{if $PRODUCTS_IMAGE!=''}<a href="javascript:;" onclick="product_pic_prev_to_0()"><img src="templates/abalico/img/pic_button_prev.gif" alt="" align="absmiddle" /></a>{/if}</td>
          <td width="180" height="190" align="center" valign="middle"><a href="{$PRODUCTS_POPUP_LINK}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME|truncate:24:"...":true}" border="0" /></a></td>
          <td width="20" align="right" valign="middle">{if $PRODUCTS_IMAGE_2 != ''}<a href="javascript:;" onclick="product_pic_next_to_2()"><img src="templates/abalico/img/pic_button_next.gif" alt="" align="absmiddle" /></a>{/if}</td>
        </tr>
        <tr title="hide_pic1">
          <td align="left" valign="middle">&nbsp;</td>
          <td align="center" valign="middle">{#text_pic1#} {$IMAGECOUNT}</td>
          <td align="right" valign="middle">&nbsp;</td>
        </tr>
        <tr title="hide_pic1">
          <td colspan="3" align="center"><img src="templates/abalico/img/pic_button_zoom.gif" alt="" align="absmiddle" /> <a href="{$PRODUCTS_POPUP_LINK}">{#text_big_pic#}</a></td>
        </tr>
      </table>
      {/if}
      {if $PRODUCTS_IMAGE_2 != ''}
      <table name="pic2" id="pic2" border="0" cellspacing="0" cellpadding="0">
        <tr title="hide_pic2">
          <td width="20" align="left" valign="middle">{if $PRODUCTS_IMAGE_1!=''}<a href="javascript:;" onclick="product_pic_prev_to_1()"><img src="templates/abalico/img/pic_button_prev.gif" alt="" align="absmiddle" /></a>{/if}</td>
          <td width="180" height="190" align="center" valign="middle"><a href="{$PRODUCTS_POPUP_LINK}"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME|truncate:24:"...":true}" border="0" /></a></td>
          <td width="20" align="right" valign="middle">{if $PRODUCTS_IMAGE_3 != ''}<a href="javascript:;" onclick="product_pic_next_to_3()"><img src="templates/abalico/img/pic_button_next.gif" alt="" align="absmiddle" /></a>{/if}</td>
        </tr>
        <tr title="hide_pic2">
          <td align="left" valign="middle">&nbsp;</td>
          <td align="center" valign="middle">{#text_pic2#} {$IMAGECOUNT}</td>
          <td align="right" valign="middle">&nbsp;</td>
        </tr>
        <tr title="hide_pic2">
          <td colspan="3" align="center" valign="top"><img src="templates/abalico/img/pic_button_zoom.gif" alt="" align="absmiddle" /> <a href="{$PRODUCTS_POPUP_LINK}">{#text_big_pic#}</a></td>
        </tr>
      </table>
      {/if}
      {if $PRODUCTS_IMAGE_3 != ''}
      <table name="pic3" id="pic3" border="0" cellspacing="0" cellpadding="0">
        <tr title="hide_pic3">
          <td width="20" align="left" valign="middle">{if $PRODUCTS_IMAGE_2!=''}<a href="javascript:;" onclick="product_pic_prev_to_2()"><img src="templates/abalico/img/pic_button_prev.gif" alt="" align="absmiddle" /></a>{/if}</td>
          <td width="180" height="190" align="center" valign="middle"><a href="{$PRODUCTS_POPUP_LINK}"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME|truncate:24:"...":true}" border="0" /></a></td>
          <td width="20" align="right" valign="middle">&nbsp;</td>
        </tr>
        <tr title="hide_pic3">
          <td align="left" valign="middle">&nbsp;</td>
          <td align="center" valign="middle">{#text_pic3#} {$IMAGECOUNT}</td>
          <td align="right" valign="middle">&nbsp;</td>
        </tr>
        <tr title="hide_pic3">
          <td colspan="3" align="center" valign="top"><img src="templates/abalico/img/pic_button_zoom.gif" alt="" align="absmiddle" /> <a href="{$PRODUCTS_POPUP_LINK}">{#text_big_pic#}</a></td>
        </tr>
      </table>
      {/if} <br />
      {if $PRODUCTS_IMAGE_LINK!=''}<a href="{$PRODUCTS_IMAGE_LINK}" onclick="window.open(this.href); return false;">{$PRODUCTS_TEXT_ZOOM}</a><br />
    {/if}

Ich habe das einfach in die Spalte mit den bisherigen Bildern reingesetzt.

Zuästzlich benötigst du noch die Javascriptanweisung in der general.js.php

Code:

function product_pic()
{

    var tablerow = document.getElementById('pic').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == 'hide_pic'){
            if(navigator.appName == "Microsoft Internet Explorer"){
                if (tablerow[i].style.display=="none"){
                    tablerow[i].style.display = 'inline';}
                else {
                    tablerow[i].style.display = 'none';}
                    
            }
            else{
                if (tablerow[i].style.display=="none") {
                    tablerow[i].style.display = 'table-row';}
                else{
                    tablerow[i].style.display = 'none';}
            }
        }
}

function product_pic1()
{

    var tablerow = document.getElementById('pic1').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == 'hide_pic1'){
            if(navigator.appName == "Microsoft Internet Explorer"){
                if (tablerow[i].style.display=="none"){
                    tablerow[i].style.display = 'inline';}
                else {
                    tablerow[i].style.display = 'none';}
                    
            }
            else{
                if (tablerow[i].style.display=="none") {
                    tablerow[i].style.display = 'table-row';}
                else{
                    tablerow[i].style.display = 'none';}
            }
        }

}


function product_pic2()
{

    var tablerow = document.getElementById('pic2').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == 'hide_pic2'){
            if(navigator.appName == "Microsoft Internet Explorer"){
                if (tablerow[i].style.display=="none"){
                    tablerow[i].style.display = 'inline';}
                else {
                    tablerow[i].style.display = 'none';}
                    
            }
            else{
                if (tablerow[i].style.display=="none") {
                    tablerow[i].style.display = 'table-row';}
                else{
                    tablerow[i].style.display = 'none';}
            }
        }
}

function product_pic3()
{

    var tablerow = document.getElementById('pic3').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == 'hide_pic3'){
            if(navigator.appName == "Microsoft Internet Explorer"){
                if (tablerow[i].style.display=="none"){
                    tablerow[i].style.display = 'inline';}
                else {
                    tablerow[i].style.display = 'none';}
                    
            }
            else{
                if (tablerow[i].style.display=="none") {
                    tablerow[i].style.display = 'table-row';}
                else{
                    tablerow[i].style.display = 'none';}
            }
        }
}

function product_pic_next_to_1()
{
product_pic();
product_pic1();
}

function product_pic_next_to_2()
{
product_pic1();
product_pic2();
}

function product_pic_next_to_3()
{
product_pic2();
product_pic3();
}

function product_pic_prev_to_0()
{
product_pic1();
product_pic();
}

function product_pic_prev_to_1()
{
product_pic2();
product_pic1();
}

function product_pic_prev_to_2()
{
product_pic3();
product_pic2();
}


function piconoff(offset) {
product_pic1();
product_pic2();
product_pic3();
}

function productinfoonload() {
piconoff();

}

Und jetzt noch die Sache sauber starten, damit es keine hässlichen Javascript-fehlermeldungen gibt. Ändere noch /includes/header.php ab.

Code:

if (strstr($PHP_SELF, FILENAME_POPUP_IMAGE )) {
echo '<body onload="resize();"> ';
}elseif (strstr($PHP_SELF, FILENAME_PRODUCT_INFO ))  {
echo '<body onload="productinfoonload()">'; 
}
else {
echo '<body>';
}

Das war es. Jetzt werden max. 4 Bilder verarbeitet. Die Produktseite wird geladen und dann werden die Tabellen einfach ausgblendet.

Viel Spaß damit.

flollo · #7 (**permalink**) 08.12.2007, 10:35

Doersam, 1.000 Dank!, das sieht prima aus - werde ich heute gern ausprobieren.

doersam · #8 (**permalink**) 09.12.2007, 08:18

Gerne geschehen. Der Shop ist zwar schon ne Weile am Start wird aber gerade grundlegend "renoviert" und da war es wichtig den "Bildernavigator" mit einzubauen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Artikelbild auf der Produktseite	mirco9	Installation und Konfiguration	1	23.11.2007 17:43
Hersteller auf Produktseite	pflegebewusst	Shopbereich	0	17.04.2007 19:53