Powiększenie obrazka po najechaniu

repley

2006-12-28 14:01

Witam,
Mam taki mały problemik, chciałbym zeby na mojej stronie obrazki (thumbnails) powiększały się po najechaniu na nie. A po nacisnięciu normalnie odpalała sie galeria LightBox Gallery albo przechodziło na strone z produktem.
Bardzo będę wdzięczny za ewentualną pomoc i poświęcony czas temu problemowi.

maly-7

2006-12-28 14:25

hm... po pierwsze musisz byc w posiadaniu skryptu powiekszajacego obrazek a tutaj nikt Ci goraczej nie napisze:). dodatkowo musi byc on napisany w js (php odpada w tym przypadku) poniewaz potem ustawi sie by byl on wykonywany po najechaniu myszka na obrazek (on mouse over) czy jakos tak.

repley

2006-12-29 08:50

Szukałem rozwiązania tego problemu znalazlem możliwość rozwiązania go nie używając javascript tylko css. To jest link do strony gdzi można obejrzeć kod. Teraz pozostaje tylko pytanie jak, gdzie i czy mozna go wstawic w źródło qiuck.carta.
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/P100/

maly-7

2006-12-29 09:20

A no chyba ze i w taki sposob.
Teraz jestem w pracy wiec praktycznie (sam to sprawdzajac) nie moge Ci pomoc ale teoretycznie tak:)
Otoz do plikow styli css (jakich uzywasz w sklepie) dodaj pierwszy kod z podanej przez Ciebie strony.
Teraz wystarczy do kazdego linku obrazka dodac klase (class="thumbnail") niestety w jakim pliku tpl. teraz nie powiem bo nie mam mozliwosci sprawdzenia ale mysle ze sobie poradzisz.

repley

2006-12-29 09:25

To teraz wszystko jasne zaraz poszukam w jakim .tpl to trzeba wkleic. Jak mi sie uda zaraz szybciutko o tym powiadomie. Wielkie dzieki za porade.

repley

2006-12-29 12:57

Udało mi się zrobić jakby ktoś chciał korzystać z tego rozwiązania to musi wykonać następujące czynności.
Poniższy kod wklić np na końcu swojego pliku .css którego w danej chwili używa.

.thumbnail{
position: relative;
float:left;margin:2px 10px 10px 0;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position:absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 0px; /*position where enlarged image should offset horizontally */

}

Następnie w pliku .tpl który odpowiada za wyświetlanie produktów z kategori. U mnie jest to productsInRow.tpl należy wkleić zamiast tego kawałka kodu:

<!-- BEGIN PHOTO -->
<div class="photo"><a href="?p=productsMore&amp;iProduct=$aList[iProduct]&amp;sName=$aList[sNameUrl]">& lt;img src="$aList[sPhotoSmall]" alt="$aList[sName]" title="$aList[sName]" /></a></div>
<!-- END PHOTO -->

Ten:

<!-- BEGIN PHOTO -->

<a class="thumbnail" href="?p=productsMore&amp;iProduct=$aList[iProduct]&amp;sName=$aList[sNameUrl]">< br /><img src="$aList[sPhotoSmall]" alt="$aList[sName]" title="$aList[sName]" border="0" /><span><img src="$aList[sPhotoBig]" alt="$aList[sName]" title="$aList[sName]" /></span></a>

<!-- END PHOTO -->

Po tym kroku wszystko powinno ładnie chodzić.

jara

2006-12-29 17:37

To Repley =>
a little error, must be in the next text:
----------------------------------------------------------------------------------------------
<!-- BEGIN PHOTO -->

<a class="thumbnail" href="?p=productsMore&amp;iProduct=$aList[iProduct]&amp;sName=$aList[sNameUrl]">& lt;br><img src="$aList[sPhotoSmall]" alt="$aList[sName]" title="$aList[sName]" border="0"><span><img src="$aList[sPhotoBig]" alt="$aList[sName]" title="$aList[sName]"</span></a>

<!-- END PHOTO -->
------------------------------------------------------------------------------------------------

Hi

jara

2006-12-29 17:41

I´m sorry, this is right

<!-- BEGIN PHOTO -->

<a class="thumbnail" href="?p=productsMore&amp;iProduct=$aList[iProduct]&amp;sName=$aList[sNameUrl]">& lt;br><img src="$aList[sPhotoSmall]" alt="$aList[sName]" title="$aList[sName]" border="0"><span><img src="$aList[sPhotoBig]" alt="$aList[sName]" title="$aList[sName]"</span></a>

<!-- END PHOTO -->

jara

2006-12-29 17:43

No I don understand why is the same text, but must be
<br>
and not
< br />

maly-7

2006-12-30 23:59

no to super ze dziala prawidlowo