Magento : Implementasi jQuery Supersized Plugin Pada Spesifik CMS Page

• February 25, 2014

Seperti judul, pada post kali ini sy akan menjelaskan bagaimana implementasi jQuery supersized pada halaman CMS. Bagi yg belum tau apa itu jQuery supersized bisa dilihat disini.
Singkatnya, jQuery supersized adalah plugin jQuery yang memungkinkan kita untuk memasang gambar/slider menjadi background sebuah website.

Pertama download plugin disini.
Kemudian extract file dan akan terdapat beberapa file dan folder.
Disini saya menggunakan jQuery Supersized v 3.2.7.

Upload supersized.3.2.7.min.js ke magento anda pada folder js->jquery->supersized.3.2.7.min
Pada skin->frontend->default->theme_anda->css->buat folder dengan nama ‘supersized’ , kemudian Upload kan folder css dan img pada superisized source anda ke folder ‘supersized’ yang sudah dibuat tadi.
Login ke magento backend -> Clear Cache
Buat halaman CMS dengan nama ‘Test Supersized’ (atau terserah anda), pada tab ‘Design’ masukkan script berikut pada kolom ‘Layout Update XML’

<reference name="head">
	<action method="addJs"><script>jquery/supersized.3.2.7.min.js</script></action>
	<action method="addCss"><stylesheet>css/supersized/css/supersized.css</stylesheet></action>
</reference>

Disini saya asumsikan, anda sudah meload jQuery pada Magento anda. Atau jika belum anda bisa download jQuery disini. Kemudian, upload ke magento anda pada folder js->jquery atau untuk lebih jelasnya anda bisa baca pada post berikut : Menggunakan jQuery di Magento

Jika semua jQuery sudah berhasil di load (Cek menggunakan inspect element pada browser), sekarang buat sebuah file gambar (.jpg/.png) dengan ukuran maksimal 1920px x 1080px.
Upload pada halaman CMS yg anda buat tadi (Insert Image -> Insert File).
Kemudian anda akan mendapat link seperti berikut -> {{media url=”wysiwyg/home_bg.jpg”}}
home_bg.jpg adalah file gambar yg sudah dibuat tadi.

Kemudian masukkan script berikut :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Pada script diatas background hanya 1 gambar, jika anda ingin membuat menjadi sebuah slider anda bisa membuatnya dengan menggunakan script dibawah :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg1.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg2.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg3.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Tapi sebelumnya upload dulu semua gambar yang akan digunakan.

Pada saat test dan jika sukses, gambar akan tampil secara penuh menjadi background website anda. Dan jika anda perhatikan dengan menggunakan inspect element akan muncul sebuah id bernama supersized tepat sebelum tag body berakhir

That’s it! Selamat Mencoba 😀