[modyfikacja] Dwa obrazki w listingu produktów

[blueparrot]

Witajcie, przygotowaliśmy ostatnio prostą modyfikację presty w wersji 1.4.9 pozwalającą na wyświetlanie dowolnej ilości zdjęć w listingach.

 

Użyte np w sklepie http://rootstore.pl/pl/13-koszulki

 

Modyfikujemy 2 pliki:

classes/product.php

oraz themes/NAZWA/product-list.tpl

 

Instalacja:

1. classes/product.php, na końcu pliku przed } doklejamy:

 

public static function geImagesByID($id_product, $limit = 100)
{
$id_image = Db::getInstance()->ExecuteS('
SELECT `id_image`
FROM `'._DB_PREFIX_.'image`
WHERE `id_product` = '.(int)($id_product) .
' LIMIT 0, ' . $limit);

$toReturn = array();

if(!$id_image)
return;
else
foreach($id_image as $image)
$toReturn[] = $id_product . '-' . $image['id_image'];

return $toReturn;
} 

 

2. W pliku product-list.tpl

 

{assign var="pImages" value=Product::geImagesByID($product.id_product, 2)}
	  {if $pImages}
		{foreach from=$pImages item=image name=images}
		  <img src="{$link->getImageLink($product.link_rewrite, $image, 'home')}" {if $smarty.foreach.images.first}class="current"{/if} alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="images_{$smarty.foreach.images.index}" />
		{/foreach}
	  {/if}

 

W pierwszej linijce na końcu mamy cyfrę 2 która określa liczbę wyświetlanych zdjęć.

 

Można pokusić się o dodanie JS na zamianę zdjęć, ale chyba lepiej zrobić to w CSSie.

[vekia]

zmieniłem tytuł na [modyfikacja]

[intracom]

Witaj, fajna sprawa dwa obrazki ładnie się wyświetlają ale czy możecie podrzucić/podpowiedzieć jakiś sprytny kod css, który wyświetlałby drugi obrazek po najechaniu na pierwszy, bo próbuję w ten sposób ale nie bardzo wychodzi:

 

#product_list li img.current {display: block;}
#product_list li img.images_1 {left: 0; position: absolute; top: 0; width: 270px; z-index:9; display: none;}
#product_list li img:hover {left: 0; position: absolute; top: 0; width: 270px; z-index:9; transition: all 0.3s linear 0s;}

Edited May 16, 2013 by intracom (see edit history)

[kadziola.jarek]

W tym szablonie jest bardzo fajnie przedstawione jak można użyć dwóch zdjęć http://www.templatemonster.com/demo/44450.html

(wystarczy najechać na produkt w liście).

[vekia]

Witaj, fajna sprawa dwa obrazki ładnie się wyświetlają ale czy możecie podrzucić/podpowiedzieć jakiś sprytny kod css, który wyświetlałby drugi obrazek po najechaniu na pierwszy, bo próbuję w ten sposób ale nie bardzo wychodzi:

 

#product_list li img.current {display: block;}
#product_list li img.images_1 {left: 0; position: absolute; top: 0; width: 270px; z-index:9; display: none;}
#product_list li img:hover {left: 0; position: absolute; top: 0; width: 270px; z-index:9; transition: all 0.3s linear 0s;}

 

musiałbyś tym obrazkom nadać indywidualny id albo klasę typu: .first dla pierwszego obrazka, .second dla drugiego

jak to zrobisz, pójdzie z górki ;-)

[blueparrot]

Każdy obrazek otrzymuje inną klase

class="images_{$smarty.foreach.images.index}"

czyli będzie

<img src="" class="images_0" />

<img src="" class="images_1" />

 

Najprościej chyba ukryć images_1

czyli

.images_1{
display: none;
}

no i po najechaniu na pewien element ukrywać 0 i pokazywac 1.

.rodzic:hover > .images_0{
display: none;
}

.rodzic:hover > .images_1{
display: block;
}

[vekia]

dokładnie to miałem na myśli :-) doskonale ;p

[gregregreg]

Odkopuje temat

 

A w jaki sposób można dodać animację przy zmianie zdjęć tak jak w przykładzie u samej góry?

[vekia]

o jakiej animacji mowa? na rootstore nie ma takowej

najeżdżasz myszką na zdjęcie i zaraz włącza się następne - bez animacji

 

chyba, że mówimy o innych "przykładach" ;-)

[gregregreg]

Chodziło mi o ten przykład: http://www.templatemonster.com/demo/44450.html

[brantas]

A może jakiś tutorial na temat zamiany obrazka po najechaniu myszką dla mniej biegłych w temacie?

[paplo22]

a jak będzie w prescie 1.6.1 z tymi dwoma obrazkami? bo nigdzie nie znalazłem