Andr3Ace Posted April 30, 2014 Share Posted April 30, 2014 (edited) Article ini disadur dari mypresta.eu yang dibuat oleh mpu Vekia (moderator forum USA).Ane cm nyimpulin & nerjemahin & share. sapa tau ada yg butuh. kl ada yg bs bantu nerjemahin lebih bagus, tlg masukannya ya.jadi smua kredit ke Vekia idenya sederhana: cuma buat menampilkan script fancybox di cms page yg notabane cm ada di product page. Daripada beli module fancybox yang muahalll T_Tgampang nya liat gambar aja: atau liat demo langsung di sininah kalo tertarik silakan ikutin step by step. STEP 0 BACKUP BACKUP BACKUP & DO IT WITH YOUR OWN RISK STEP 1 link 1Persiapan pertama adalah meng extend default tinyMCE di cms editor.Default TinyMCE editor cm menampilkan bbrp tools editor di page nya.Tujuan step ini: menambahkan tools baru di CMS editor yg bisa support smua HTML tags + javascript.hal ini PENTING, karena by default simple editor ga mengijinkan penggunaan javascript + bbrp html tags padahal akan kita gunakan di step slanjutnya. cari file file: direktori admin/themes/default/template/helpers/form/form.tpl $(document).ready(function(){ {block name="autoload_tinyMCE"} tinySetup({ editor_selector :"autoload_rte" }); {/block} }); BACKUP FIRST!!! lalu tambahkan code tool yg disebut di atas di dlm fungsi tinySetup({ }) shg brubah menjadi $(document).ready(function(){ {block name="autoload_tinyMCE"} tinySetup({ editor_selector :"autoload_rte", theme_advanced_buttons1 : "save,newdocument,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect, fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,search,replace,bullist,numlist,outdent,indent,blockquote,undo,redo,link,unlink,anchor,image,cleanup,help,codemagic,insertdate,inserttime,preview,forecolor,backcolor", theme_advanced_buttons3 : "code,tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,iespell,media,advhr,print,ltr,rtl,fullscreen", theme_advanced_buttons4 : "styleprops,cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : false, extended_valid_elements: 'pre[*],script[*],style[*]', valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]", valid_elements : '*[*]', force_p_newlines : false, cleanup: false, forced_root_block : false, force_br_newlines : true }); {/block} }); code tambahan akan mengextend default tinyMCE editor + memungkinkan pemakaian javascript & html tags tambahan. step 1 selesai & jangan lupa SAVE!!! STEP 2 link 2 Mengvalidasi validate.php (/classes/Validate.php file). Ingat BACKUP FIRST!!! PS1.5.5+ - cari dan tambahkan kode comment out di line di bawah ini //if (preg_match('/<[ \t\n]*script/ims', $html) || preg_match('/('.$events.')[ \t\n]*=/ims', $html) || preg_match('/.*script\:/ims', $html)) //return false; PS1.5.6+ punya tambahan param: $allow_iframe = false yg berfungsi!! dan harus di modif sedikit public static function isCleanHtml($html, $allow_iframe = false) menjadi public static function isCleanHtml($html, $allow_iframe = false){ return true; } PS1.5.5 ke bawah hrs mengubah public static function isCleanHtml($html) { $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange'; $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend'; $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove'; $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel'; $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart'; $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange'; $events .= '|onselectstart|onstart|onstop'; return (!preg_match('/<[ \t\n]*script/ims', $html) && !preg_match('/('.$events.')[ \t\n]*=/ims', $html) && !preg_match('/.*script\:/ims', $html)); } menjadi public static function isCleanHtml($html){ /* $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange'; $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend'; $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove'; $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel'; $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart'; $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange'; $events .= '|onselectstart|onstart|onstop'; return (!preg_match('/<[ \t\n]*script/ims', $html) && !preg_match('/('.$events.')[ \t\n]*=/ims', $html) && !preg_match('/.*script\:/ims', $html)); */ return $html; } ~ SAVE ~ STEP 3 link 3 Sekarang kita perlu menambahkan fancybox script & CSS file ke tiap CMS page. Buka /controllers/front/CMSController.php & cari function public function setMedia() spt ini public function setMedia(){ parent::setMedia(); if ($this->assignCase == 1) $this->addJS(_THEME_JS_DIR_.'cms.js'); $this->addCSS(_THEME_CSS_DIR_.'product.css'); $this->addCSS(_THEME_CSS_DIR_.'cms.css'); } tambahkan script & css fancybox di dalam function setmedia tsb shg menjadi public function setMedia(){ parent::setMedia(); if ($this->assignCase == 1) $this->addJS(_THEME_JS_DIR_.'cms.js'); $this->addCSS(_THEME_CSS_DIR_.'product.css'); $this->addCSS(_THEME_CSS_DIR_.'cms.css'); $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen'); $this->addJqueryPlugin('fancybox'); } Nah langkah2 persiapan sudah selesai. Skr cms page kita sudah mempunyai library & tools yg akan di gunakan di langkah penggunaan fancybox di cms page. GALLERY-FANCYBOX DI CMS PAGE Login ke BO & masuk ke preferences > CMS tab. Buat page baru atawa edit page yg uda ada. Misalnya kita bikin page baru "Gallery" Lalu tambahkan script ini untuk menjalankan script fancybox <script type="text/javascript"> $(document).ready(function() { $("a.fancybox").fancybox(); }); </script> dengan mengklik tombol html warna biru spt di gambar letakkan di halaman teratas dan update nah insert pics dg mengambil html address nya dari web kamu. caranya bisa mengambil pics yg sudah ada di product page atau upload manual via ftp dan letakkan di mana saja. tp sebaiknya di tempat yg kamu ingat mis root/img/[folder baru] karena kita akan memakai 2 ukuran untuk 1 gambar (thumbnail dan ukuran besar) maka untuk upload manual hrs membuat ukuran thumb & ukuran besar. yang memakai gambar yg sudah ad tinggal mengkopi alamat html bt thumb (mis domain.com/4-home_default/produk.jpg) dan gambar besarnya (domain.com/44-thickbox_default/produk.jpg) Langsung praktek aja gan dan sy akan mengambil contoh langsung dari web mypresta.eu klik tombol insert image untuk thumb ambil dari http://demo.mypresta.eu/15-home_default/ipod-nano.jpg, paste alamatnya di kotak "Image URL" klik tambol insert selanjut nya kita membuat link large image di thumb barusan tambahkan link ke gambar thumb yg barusan kita masukan dengan mengklik kanan thumb tsb add hyperlink di kolom Link URL tambahkan link large image dari http://demo.mypresta.eu/15-large_default/ipod-nano.jpg atawa bs juga pake image thickbox (lebih besar) sekarang tinggal menambahkan class fancybox ke large image tadi pindah ke tab ADVANCED tab di kolom classes ketik (case sensitive) "fancybox" trs update SELESAI. kamu bs memasukan gambar sebanyak2 nya di galery tsb & edit2 tampilan smau mu misalnya dengan menambahkan class "success" dll sehingga di gbr thumb nya ada frame dll berhasil di jalankan di ps1.5.6.1 prestanasia, 1.5.4.1 (link) Kalau ada pertanyaan tolong jangan nanya ane karena ane ga ngerti php code dll . artikel ini ada karena ane cm mo share lantaran dulu sempet berhari-hari nyari & baca2 forum & ngumpulin data & copy paste aj bt bikin fancybox di halaman pembayaran web ane. soalnya module fancybox itu mahal dah makanya nyari yg gratisan mungkin momods di sini bs bantuin ntinya. tengkyu Edited April 30, 2014 by Andr3Ace (see edit history) 1 Link to comment Share on other sites More sharing options...
Recommended Posts