Jump to content
Andr3Ace

[SHARE] Cara bikin Galery + fancybox di CMS PS1.4/1.5

Recommended Posts

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_T
gampang nya liat gambar aja: post-773117-0-97462900-1398842441_thumb.jpg atau liat demo langsung di sini
nah kalo tertarik silakan ikutin step by step.

 

STEP 0 BACKUP BACKUP BACKUP & DO IT WITH YOUR OWN RISK

 

STEP 1 link 1
Persiapan 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.
post-773117-0-62022100-1398843342_thumb.jpg
 
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

post-773117-0-57975600-1398848585_thumb.gif

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

  1. klik tombol insert image
  2. untuk thumb ambil dari http://demo.mypresta.eu/15-home_default/ipod-nano.jpg, paste alamatnya di kotak "Image URL"
  3. klik tambol insert post-773117-0-61254000-1398850569_thumb.gif

 

selanjut nya kita membuat link large image di thumb barusan

  1. tambahkan link ke gambar thumb yg barusan kita masukan dengan mengklik kanan thumb tsb
  2. add hyperlink
  3. 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)post-773117-0-33316700-1398851327_thumb.gif

 

sekarang tinggal menambahkan class fancybox ke large image tadi

  1. pindah ke tab ADVANCED tab
  2. di kolom classes ketik (case sensitive) "fancybox" trs update post-773117-0-99294400-1398851596_thumb.gif

 

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 :blush:.

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 :P

mungkin momods di sini bs bantuin ntinya. tengkyu

Edited by Andr3Ace
  • Like 1

Share this post


Link to post
Share on other sites

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More