Slideshow/Bildergalerie auf Produktseite

flollo · December 7, 2007

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 · December 7, 2007

machs einfach ganz easy ...

random 5 produkte aus der datenbank holen..

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

jua · December 7, 2007

such mal nach itratos

flollo · December 7, 2007

machs einfach ganz easy ...

random 5 produkte aus der datenbank holen..

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

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 · December 7, 2007

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?

December 8, 2007

Meint Ihr so etwas:

http://www.abalico.de/shop_new/products/de/Nagelmodellage/leer/DECISION-Connexis-10ml1.html

Baue das mal in deine Produkt-Info Template ein:

      {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"> </td>

          <td align="center" valign="middle">{#text_pic1#} {$IMAGECOUNT}</td>

          <td align="right" valign="middle"> </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"> </td>

          <td align="center" valign="middle">{#text_pic2#} {$IMAGECOUNT}</td>

          <td align="right" valign="middle"> </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"> </td>

        </tr>

        <tr title="hide_pic3">

          <td align="left" valign="middle"> </td>

          <td align="center" valign="middle">{#text_pic3#} {$IMAGECOUNT}</td>

          <td align="right" valign="middle"> </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

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.

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 · December 8, 2007

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

December 9, 2007

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.

Sign In

Slideshow/Bildergalerie auf Produktseite

Recommended Posts

flollo

Link to comment

Share on other sites

philipp1988

Link to comment

Share on other sites

jua

Link to comment

Share on other sites

flollo

Link to comment

Share on other sites

flollo

Link to comment

Share on other sites

Guest doersam

Link to comment

Share on other sites

flollo

Link to comment

Share on other sites

Guest doersam

Link to comment

Share on other sites

Archived

Browse

Activity