Virtuemart: Memperbesar Gambar Thumbnail Saat a:hover

Tutorial
aagun2006, Wednesday, 24 September 2008 08:45

Sudah lama tidak nulis di sini, kebetulan beberapa hari lalu seseorang meminta saya untuk merubah tampilan thumbnail virtuemartnya agar gambar produk jika mouse hover bisa tampil rada gede. Triknya saya coba kupas disini semoga bisa bermanfaat dan dapat dikembangkan lebih baik.

Bagaimana caranya? Jawabannya : Gunakan CSS.

Kita hanya perlu sedikit modifikasi file ps_product.php yang berada di administrator\components\com_virtuemart\classes. Coba lihat line 1302:

return "<img src=\"$url\" $html_height_width $args $border />";

kita tambahkan nama class, misal aagun, sehingga menjadi :

return "<img src=\"$url\" $html_height_width $args $border class=\"aagun\" />";

Class inilah yang nantinya menjadi acuan untuk kita melakukan hover.

Kemudian di file css kita masukan :

a:hover img.aagun { width:25%; height:50%; position:absolute; border:5px double #ccccff; background-color:#FFFFFF; display:block;}

Untuk sementara dengan cara diatas permintaan client anda bisa terpenuhi. Tetapi masih ada kelemahan dari cara ini diantaranya image yang dihover dipaksakan dinaikan sesuai dengan nilai css kita jadinya jelas gambar akan pecah, kemudian semua gambar yang ada nama class di atas, akan mengikuti aturan ini.

Tetapi bagi Anda yang menginginkan seperti ini, kenapa tidak dicoba, dan yang lebih pasti dikembangkan lagi untuk lebih sempurna, mungkin ada cara lain yang lebih baik dari ini ?

Comments

ngilangin logo virtuemart gabrud 2008-11-08 03:48:53 klo ngilangin logo virtuemart yang dibawah tu gmn yach?thanks

ilangin logo virtuemart Renova 2008-11-10 08:47:37 iyah, gmn sich cara ilangin logo virtuemartnya?ada yang bs bantu?thx yah

Menghilangkan logo virtuemart danish 2008-11-11 20:48:01 Untuk menghilangkan logo virtuemart administrator/virtumart/configuration/ site lalu hilangkan tanda check di box show footer

detail produk gak bisa ditampilkan cleo_digo 2008-12-08 01:18:18 Mohon bantuannya dong..kenapa ya saya meke virtuemart..setelah klik tombol detail product kok bisa muncul produk detailnya,setingannya dimana ya???? mohon bantuannya.

revisi cleo_digo 2008-12-08 01:21:18 maksudku detail produknya gak bisa ditampilan mas.. Thanks

Bantuin dong... Ricky Ronaldi 2009-02-04 00:46:18 mohon bantuannya dong...saya ada kasus persis seperti yang diberikan solusinya diatas...tp itu kan berarti membesarkan gambar yg kecil sehingga jadi pecah, adakah yg bisa bantu supaya waktu mouse kita diarahkan di atas gambar thumbnail langsung muncul image yang versi besar tapi tidak pecah?? Terima kasih

Only registered users can write comments!

Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."