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

Memanfaatkan jQuery Magnifyer Pada Joomla

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

-- Perhatian -- Artikel ini hanya untuk pemula.

Sebuah gambar pada suatu situs, bisa dikatakan penting untuk memperjelas isi dari tulisan/ artikel pada situs tersebut. Tentunya gambar yg disisipkan harus bisa dilihat jelas. Kalo disisipkan dengan ukuran sebenarnya misal 800 x 600 px ato 480 x 640px, artikel akan dipenuhi oleh gambar, tulisan nya jadi tersisihkan. Untuk mengatasinya ukuran gambar diperkecil, masalah baru timbul, gambar jadi kurang jelas.

Solusinya mungkin dibuat hyperlink dari image tersebut ke ukuran yang sebenarnya. Misalkan ukuran gambar di artikel 150 x 100 px, dibuat link untuk membuka jendela baru/ popup windows dengan ukuran 480 x 640px. Cara ini cukup membantu, saya sendiri pernah menggunakannya. Tetapi setelah diperhatikan kayanya kurang menarik.

Akhirnya setelah berkunjung ke http://www.dynamicdrive.com , ada sebuah cara untuk memperbesar image (Image Magnify) dengan memanfaatkan jQuery Image Magnify. Caranya cukup mudah, tinggal kita menambahkan jquery.magnifyer.js dan sedikit menambahkan kode kelas pada image yg kita sisipkan.

Siapkan dulu file-file yang diperlukan yaitu jquery.magnifyer.js yang bisa diunduh di sini. Kemudian untuk kursornya (buat browser IE) di sini.

Inilah langkah-langkahnya:

  1. Buka file index.php yg ada pada template aktif, sisipkan perintah berikut di antara tag untuk meload skrip javascript.


    /templates/template;?>/js/jquery.magnifier.js">

    Setelah itu simpan, kemudian tutup template editor.
  2. Buka artikel yang terdapat image-nya. Aktifkan image yang akan kita magnify dengan cara di klik. Kemudian klik ikon insert/ edit image untuk membuka kotak dialog setingan image.

    Image Editor

Ada tiga tab yg perlu kita isi yaitu general, appereance, advanced.

  1. Pada tab general alamat image udh terisi, karena kita bukan mau menyisipkan image, tapi mau merubah properti image.

    Inser Image
  2. Jadi kita langsung ke tab kedua (appearance), terdapat beberapa parameter. Tetapi yg penting adalah: Class, kita isi dengan magnify. Parameter yg lain seperti posisi gambar, ukuran, spasi vertikal dan horizontal terserah


    Image Properties


    Tab advanced tidak perlu dibuka, langsung aja klik update

  3. Kita coba buka (preview) situs kita, dekatkan mouse ke atas image yg sudah diedit, kalo kursor mouse berubah jadi (+) langsung klik (Untuk IE sama Chrome kadang gak berubah). Klo gambar jadi membesar berarti sudah sukses.
  4. Ulangi langkah 1 – 4 untuk gambar yang lain. Untuk melihat hasilnya bisa lbuka di sini.

Cara ini mungkin kurang praktis juga, cuma baru itu saja yang bisa saya tulis. Mungkin ada Joomlaers yang bisa membuatnya jadi plugin atao component sehingga jadi lebih praktis.

0
  • cukup menarik.
    Saya ada bbrp pertanyaan.
    1. Apa javascript tsb merupakan plugin dr jquery atau library yg brdiri sendiri?
    2. Jika itu adalah plugin jquery, bukankah kita jg perlu menambahkan kode untuk 'memanggil' jquery pada template kita.
    3. Apa tdk terjadi konflik pada script? Mengingat javascript library pd system joomla memakai mootools?

    0 Like Short URL:
  • :woohoo:

    tfs pak, kpikiran seLaman mau nyari yg ginian, akhirnya nemuin juga,,,
    sip pak,,

    0 Like Short URL:
  • [quote=froster]cukup menarik.
    Saya ada bbrp pertanyaan.
    1. Apa javascript tsb merupakan plugin dr jquery atau library yg brdiri sendiri?
    memakai mootools?[/quote][quote=froster]cukup menarik.
    Saya ada bbrp pertanyaan.
    1. Apa javascript tsb merupakan plugin dr jquery atau library yg brdiri sendiri?
    2. Jika itu adalah plugin jquery, bukankah kita jg perlu menambahkan kode untuk 'memanggil' jquery pada template kita.
    3. Apa tdk terjadi konflik pada script? Mengingat javascript library pd system joomla memakai mootools?[/quote]

    1. Ya memang perlu memanggil jQuery, tulisan di atas ada yg kurang lengkap. Untuk memanggilnya sisipkan skrip di bawah ini


    2. Saya sudah coba,sementara ini tidak ada konflik dengan mootools.

    0 Like Short URL:
  • Apa cara ini tidak sama dengan plugin mavick thumbnail?

    0 Like Short URL:
  • terima kasih atas tutor nya mas. maaf, sepertinya link ke JS nya broken yach?

    0 Like Short URL:
  • linknya mana nih mas, kok broken ya? :whistle:

    lagi butuh banget nih

    0 Like Short URL:
  • 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