Joomla Indonesia

Login or Sign Up
Sign In or Register
Avatar
Not Registered Yet?

Join Now! It's FREE. Get full access and benefit from this site

Reset My password - Remind Me My username

Username
Password
Remember me
  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login
    Login Login form

Virtuemart: Memperbesar Gambar Thumbnail Saat a:hover

Posted by on in Tutorial
  • Font size: Larger Smaller
  • Hits: 9090
  • 6 Comments
  • Subscribe to this entry
  • Print

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 ?

0

People in this conversation

  • Guest - gabrud

    klo ngilangin logo virtuemart yang dibawah tu gmn yach?thanks

    0 Like Short URL:
  • Guest - Renova

    iyah, gmn sich cara ilangin logo virtuemartnya?ada yang bs bantu?thx yah

    0 Like Short URL:
  • Guest - danish

    Untuk menghilangkan logo virtuemart
    administrator/virtumart/configuration/site lalu
    hilangkan tanda check di box show footer

    0 Like Short URL:
  • Guest - cleo_digo

    Mohon bantuannya dong..kenapa ya saya meke virtuemart..setelah klik tombol detail product kok bisa muncul produk detailnya,setingannya dimana ya????
    mohon bantuannya.

    0 Like Short URL:
  • Guest - cleo_digo

    maksudku detail produknya gak bisa ditampilan mas..

    Thanks

    0 Like Short URL:
  • Guest - Ricky Ronaldi

    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

    0 Like Short URL:

Kategori Blog

Joomla User Group Indonesia

Joomla User Group indonesia

Id-joomla.com adalah situs resmi Joomla User Group (JUG) Indonesia dan Joomla Translation Team

 
Download Terjemahan Joomla terakreditasi dari JoomlaCode dan laporkan bugs, ide dan saran nya di Sub Forum Hanacaraka

Socials

twitter id joomlafb idjoomla