ANLEITUNG: Dynamische Bildvorschau für die Produktseite

[dutchy]

Hallo Forum,
ich bin dabei ein shop aufzusetzen, bin auch schon so gut wie durch, ich kann aber leider noch kein link zum shop posten, da noch streng geheim.
es fehlt "nur" noch der letzte feinschliff, dazu gehört u.a. die anzeige mehrerer bilder in produktdetail.
die zugeordnet ist soweit kein problem, er zeigt diese auch an. nun möchte ich aber gerne, dass wenn ich auf eine kleines bild klicke, dass er sich mit dem oberen grossen bild austauscht. so dass da z.b. auf den jqzoom genutzt werden kann.
vielleicht hat jemand ne idee oder vielleicht sogar eine lösung.

mfg
dutchy

[EDIT Tomcraft 02.03.2011: Hier geht es direkt zur Anleitung.]



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

[Tomcraft]

Füge in der general.js.php folgendes hinzu:

Code: PHP  [Auswählen]

<script type="text/javascript">
/* <![CDATA[ */
function replacebild(replacement){document.mainpicbild.src=replacement;}
/*]]>*/
</script>

Dann hier noch der Code für das Hauptproduktbild in der product_info_v1.html:

Code: PHP  [Auswählen]

          {if $PRODUCTS_IMAGE!=''}
            <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" name="mainpicbild" id="mainpicbild" />{if $PRODUCTS_POPUP_LINK!=''}<br/><br/><img src="{$tpl_path}img/magnifier.gif" alt="" border="0" /> {#text_zoom#}{/if}</a>
         {/if}

Und hier die kleinen Vorschaubilder, die du darunter einfügst:

Code: PHP  [Auswählen]

        <tr>
          <td>{if $PRODUCTS_IMAGE != ''}<a href='javascript:replacebild("{$PRODUCTS_IMAGE}");'><img class="image" src='{$PRODUCTS_IMAGE}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>{/if}</td>
          <td>{if $PRODUCTS_IMAGE_1 != ''}<a href='javascript:replacebild("{$PRODUCTS_IMAGE_1}");'><img class="image" src='{$PRODUCTS_IMAGE_1}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>{/if}</td>
          <td>{if $PRODUCTS_IMAGE_2 != ''}<a href='javascript:replacebild("{$PRODUCTS_IMAGE_2}");'><img class="image" src='{$PRODUCTS_IMAGE_2}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>{/if}</td>
          <td>{if $PRODUCTS_IMAGE_3 != ''}<a href='javascript:replacebild("{$PRODUCTS_IMAGE_3}");'><img class="image" src='{$PRODUCTS_IMAGE_3}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>{/if}</td>
        </tr>

Hier noch die alternative Version mit dem "more_images" Array:

Code: PHP  [Auswählen]

      <tr>
        <td colspan="2">
          {if $more_images|@count> 0}
          <div id="tab_more_images">
            {* More Pictures *}
            <div class="morepics">
              {if $PRODUCTS_IMAGE != ''}<a href='javascript:replacebild("{$PRODUCTS_IMAGE}");'><img class="image" src='{$PRODUCTS_IMAGE}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>{/if}
              {foreach item=more_images_data from=$more_images}
              <a title="{$PRODUCTS_NAME}" href='javascript:replacebild("{$more_images_data.PRODUCTS_IMAGE}");'><img align="left" src='{$more_images_data.PRODUCTS_IMAGE}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>
              {/foreach}
            </div>
            <div style="clear:both;"></div>
          </div>
          {/if}
        </td>
      </tr>

Vielleicht kann das jemand anders nochmal überprüfen, dann würde ich das als product_info_v2.html mit in den Trunk übernehmen.

Grüße

Torsten

[EDIT Tomcraft 03.03.2011: Code korrigiert, Danke an h-h-h.]
[EDIT Tomcraft 03.03.2011: Code korrigiert, Danke an h-h-h.]

[Tomcraft]

Kann bitte mal jemand schauen, warum das mit dem "more_images" Array nicht funktionieren will?

Grüße

Torsten

[Tomcraft]

*schieb*

Grüße

Torsten

[h-h-h]

Ersetze

Code: PHP  [Auswählen]

                {foreach item=more_images_data from=$more_images}
                <a title="{$PRODUCTS_NAME}" href='javascript:replacebild("{$PRODUCTS_IMAGE}");'><img align="left" src='{$PRODUCTS_IMAGE}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>
                {/foreach}
 

mit

Code: PHP  [Auswählen]

                {foreach item=more_images_data from=$more_images}
                <a title="{$PRODUCTS_NAME}" href='javascript:replacebild("{$more_images_data.PRODUCTS_IMAGE}");'><img align="left" src='{$more_images_data.PRODUCTS_IMAGE}' width="80" border="0" alt="{$PRODUCTS_NAME}" /></a>
                {/foreach}
 

Hab's jetzt nicht getestet, sollte aber an dem

Code: PHP  [Auswählen]

$PRODUCTS_IMAGE statt $more_images_data.PRODUCTS_IMAGE
 

liegen.

Gruß

h-h-h

[Tomcraft]

Man, das ärgert mich jetzt aber echt, da ich das eigentlich hätte sehen müssen!

Danke dir!

Hast du noch eine Idee, wie wir das Thema sinnvoll benennen können?

Nachtrag: Nun werden zwar die Bilder angezeigt, aber der Bildwechsler funktioniert nicht. Weitere Ideen?

Grüße

Torsten

[h-h-h]

Hi Torsten,
hattest Du bei replacebild() auch "$more_im**" getestet, so wie ich es geschrieben habe?

suche:

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href='javascript:replacebild("{$PRODUCTS_IMAGE}");'>
 

ersetze mit:

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href='javascript:replacebild("{$more_images_data.PRODUCTS_IMAGE}");'>
 

Gruß

h-h-h

[Tomcraft]

Nein, natürlich nicht...

Das teste ich morgen mal!

Grüße

Torsten

[Tomcraft]

So, ein bisschen Auswahl schadet sicherlich nicht, daher habe ich die neuen product_info templates mal in r1817 in den Trunk übernommen.

Hat jemand noch eine Idee, wie man das Thema hier ein wenig aussagekräftiger benennen könnte?

Grüße

Torsten

[h-h-h]

Ich verstehe das ganze irgendwie nicht. Bekomme es im Demoshop einfach nicht vor die Augen.

Bitte zeige mir mal bitte, was die Änderung jetzt gebracht hat.

Gruß

h-h-h

[Tomcraft]

Du musst dazu das Template für die Artikeldetails natürlich umstellen.

Grüße

Torsten

[h-h-h]

Hab ich natürlich gemacht, konnte aber nichts feststellen.

Gruß

H*

[Tomcraft]

Also ich sehe die Änderungen.

Habe es eben nochmal im Demoshop getestet.

Grüße

Torsten

[h-h-h]

Ja, cool jetzt hat es bei mir auch geklappt.

Nur die Bildvergrößern-Funktion geht dann nicht mehr für die weiteren Produktbilder.

Gruß

h-h-h

[Tomcraft]

Für die weiteren soll es dann ja auch nicht mehr funktionieren, es soll ja oben das Bild getauscht werden und das ist dann vergrößerbar.

Danke für's umbenennen des Themas! Gleich viel besser!

Grüße

Torsten