Mudah Membuat Slideshow Dengan WOW Slider
By Cruz3N | on August 6th, 2011 | 21 Comments
Oke ketemu lagi dengan saya dan pada tutorial kali ini gak ada yang terlalu rumit. Saya hanya sedikit membahas tentang aplikasi yang namanya WOW Slider. WOW Slider adalah aplikasi yang bisa kita gunakan untuk membuat sebuah slider / slideshow dengan mudah dan cuman modal klik klak klik doang 
. Gak pake skill coding dll. Lagipula akhir-akhir ini slideshow merupakan salah satu unsur wajib bagi sebuah website, karena akan menambah daya tarik tersendiri 
Nah karena aplikasi ini gratisan / free pasti gak lepas dari yang namanya copyright / watermark yang cukup mengganggu dan pastinya kurang sedap dipandang mata 
. Nah disini juga saya bahas cara simplenya gmana cara menghilangkan “gangguan2″ tersebut 
.
Kelebihan
1. Kita bisa membuat slideshow dengan sangat mudah. Nah asik tuh untuk orang seperti saya yang gak bisa coding
2. Configurasinya cukup bagus dan gak terlalu susah
Kekurangan
1. Akan terdapat watermark pada setiap gambar yang akan kita pilih untuk dijadikan slideshow.
2. Watermark berupa anchor text yang terdapat disebelah kanan bawah slideshow kita.
3. Transition effect / Effect slideshownya yang mau kita pilih hanya bisa 1 macam 
Well mungkin ada beberapa kelebihan dan kekurangan yang saya lewatkan tapi namanya juga gratisan so bersyukurlah 
Wokwokowkowkwokwok…
Pengoperasian
Gak ada yang terlalu susah dalam hal pengoperasian. Setelah melakukan penginstalan kita tinggal jalankan aplikasinya dan akan mendapat tampilan seperti berikut.
Lalu langkah awal yang perlu kita lakukan adalah meng-klik tanda plus hijau untuk memilih gambar yang akan kita jadikan slideshow.
Nah setelah gambar sudah selesai kita pilih, lanjut ke menu Gallery – Properties atau klik icon obeng maka akan muncul tampilan sebagai berikut.
- Slider title = Nama title dari slider yang kita buat
- Auto play Slide Show = Slide show akan otomatis berjalan ketika website dibuka
- Pause on mouseover = Ketika mouse diarahkan ke slideshow maka akan berhenti
- Stop slideshow after one loop = Jadi setelah semua gambar yang telah kita pilih sudah ditampilkan maka slideshownya akan berhenti
- Show descriptions = Menampilkan deskripsi gambar
- Show Prev/Next buttons = Menampilkan tombol prev dan next
- Show bullet navigation = Menampilkan thumbnail kecil dari gambar slideshow kita
- Thumbnail preview = Tinggal kita pilih mau diletakkan dimana thumbnail preview dari slideshow kita
Kalau gak mau ribet dilewatkan aja bagian ini karena settingan seperti itu juga gak buruk kok Sekarang lanjut ke Tab Images disebelahnya.
Gak terlalu susah ngutak-atik bagian ini. Kita tinggal pilih template yang mau kita pake, ukuran gambar, effect slideshow dll. Sayangnya template yang bisa digunakan tidak terlalu banyak tapi dengan modal ngerti sedikit CSS dan Photoshop kita juga bisa kok buat sendiri templatenya 
Lanjut ke bagian Publish. Mudah kan ?
Watermark oh Watermark
Sebenernya gak ada maksud jahat juga, itu merupakan bentuk penghargaan kita sama si pembuat aplikasi yang udah buat capek-capek dan dikasih gratis pula 
Tapi ya mau bagaimana lagi, client kita bakalan marah2 klo sampai ada sesuatu yang kurang enak dipandang mata di websitenya.
Tanda seperti ini akan ada pada setiap Images, Thumbnail dan Layout pada slideshow kita.
Untuk images dan thumbnailnya gak terlalu susah lah menghilangkannya, cukup replace aja dengan gambar aslinya 
Gampang kan ? Nah sekarang untuk menghilangkan watermark pada tampilan layout slideshow kita sekarang buka file script.js yang terdapat pada folder engine1.
Berantakan banget yah? Tapi untungnya tidak dilakukan enkripsi / encoding sama sekali tapi hanya diminimize agar ukuran file tidak terlalu besar so kita tinggal rapihin aja susunan code javascriptnya disini jsbeautifier.org. Copy dan paste kode tersebut dan klik tombol Beauty Javascript. Maka susunan kodenya sudah agak terlihat manusiawi 
Langkah selanjutnya yah tinggal kita copy paste lagi hasilnya tadi ke file script.jsnya. Permasalahan belum selesai Bro, code yang digunakan untuk menghandle watermark tersebut adalah dibagian berikut.
var d = c ? $(document.createElement("A")) : c;
if (d) {
d.css({
position: "relative",
display: "block",
'background-color': "#E4EFEB",
color: "#837F80",
'font-family': "Lucida Grande,sans-serif",
'font-size': "11px",
'font-weight': "normal",
'font-style': "normal",
'-moz-border-radius': "5px",
'border-radius': "5px",
padding: "1px 5px",
width: "auto",
height: "auto",
margin: "0 0 0 0",
outline: "none"
});
d.attr({
href: "ht" + "tp://" + t.toLowerCase()
});
d.html(t);
d.bind("contextmenu", function (eventObject) {
return false;
});
c.append(d);
}
Tinggal hapus aja sehingga keseluruhan codenya menjadi seperti berikut.
// -----------------------------------------------------------------------------------
// http://wowslider.com/
// JavaScript Wow Slider is a free software that helps you easily generate delicious
// slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
// Last updated: 2011-06-16
//
//***********************************************
// Obfuscated by Javascript Obfuscator
// http://javascript-source.com
//***********************************************
ws_blinds = function (options) {
var $ = jQuery;
var $IMGs;
var parts = [];
var prevIndex = 0;
var $partscont;
this.init = function (aCont) {
var cnt = 3;
var $container = $(aCont);
$IMGs = $("a", $container).find("img");
$IMGs.each(function (index) {
if (index) {
$(this).hide();
}
});
$partscont = $("<div></div>");
$partscont.css({
position: "absolute",
width: options.width + "px",
height: options.height + "px",
left: (options.outWidth - options.width) / 2 + "px",
top: (options.outHeight - options.height) / 2 + "px"
});
$container.append($partscont);
for (var i = 0; i < cnt; i++) {
parts[i] = $("<div></div>");
}
$(parts).each(function (index) {
$(this).css({
position: "absolute",
'background-repeat': "no-repeat",
height: "100%",
border: "none",
margin: 0,
top: 0,
left: Math.round(100 / cnt) * index + "%",
width: (index < cnt - 1 ? Math.round(100 / cnt) : 100 - Math.round(100 / cnt) * (cnt - 1)) + "%"
});
$partscont.append(this);
$partscont.hide();
});
};
this.go = function (index) {
for (var i = 0; i < parts.length; i++) {
parts[i].stop(true, true);
}
var dir = prevIndex > index ? 1 : 0;
prevIndex = index;
function startPart(part_i, func) {
var $part = parts[part_i];
var w = $part.width();
var img = $IMGs.get(index);
$part.css({
'background-position': (!dir ? -$(img).width() : $(img).width() - $part.position().left) + "px 0",
'background-image': "url(" + img.src + ")"
});
$part.animate({
'background-position': -$part.position().left + "px 0"
}, options.duration / (parts.length + 1) * (dir ? parts.length - part_i + 1 : part_i + 2), func);
}
function applyImage() {
$IMGs.hide();
$($IMGs.get(index)).show();
$partscont.hide();
$(parts).each(function () {
$(this).css({
'background-image': "none"
});
});
}
$partscont.show();
for (var i = 0; i < parts.length; i++) {
startPart(i, !dir && i == parts.length - 1 || dir && !i ? applyImage : null);
}
return true;
};
};
(function ($) {
var $div = $("<div style=\"background-position: 3px 5px\">");
$.support.backgroundPosition = $div.css("backgroundPosition") === "3px 5px" ? true : false;
$.support.backgroundPositionXY = $div.css("backgroundPositionX") === "3px" ? true : false;
$div = null;
var xy = ["X", "Y"];
function parseBgPos(bgPos) {
var parts = bgPos.split(/\s/),
values = {
X: parts[0],
Y: parts[1]
};
return values;
}
if (!$.support.backgroundPosition && $.support.backgroundPositionXY) {
$.cssHooks.backgroundPosition = {
get: function (elem, computed, extra) {
return $.map(xy, function (l, i) {
return $.css(elem, "backgroundPosition" + l);
}).join(" ");
},
set: function (elem, value) {
$.each(xy, function (i, l) {
var values = parseBgPos(value);
elem.style["backgroundPosition" + l] = values[l];
});
}
};
}
if ($.support.backgroundPosition && !$.support.backgroundPositionXY) {
$.each(xy, function (i, l) {
$.cssHooks["backgroundPosition" + l] = {
get: function (elem, computed, extra) {
var values = parseBgPos($.css(elem, "backgroundPosition"));
return values[l];
},
set: function (elem, value) {
var values = parseBgPos($.css(elem, "backgroundPosition")),
isX = l === "X";
elem.style.backgroundPosition = (isX ? value : values.X) + " " + (isX ? values.Y : value);
}
};
$.fx.step["backgroundPosition" + l] = function (fx) {
$.cssHooks["backgroundPosition" + l].set(fx.elem, fx.now + fx.unit);
};
});
}
})(jQuery);
// -----------------------------------------------------------------------------------
// http://wowslider.com/
// JavaScript Wow Slider is a free software that helps you easily generate delicious
// slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
// Last updated: 2011-06-16
//
//***********************************************
// Obfuscated by Javascript Obfuscator
// http://javascript-source.com
//***********************************************
jQuery.fn.wowSlider = function (options) {
var $this = this;
var $ = jQuery;
options = $.extend({
effect: function (options) {
var images;
this.init = function (aCont) {
images = aCont.find("img");
images.each(function (Index) {
if (!Index) {
$(this).show();
} else {
$(this).hide();
}
});
};
this.go = function (new_index, curIdx) {
$(images.get(new_index)).fadeIn(options.duration);
$(images.get(curIdx)).fadeOut(options.duration);
return true;
};
},
prev: "",
next: "",
duration: 1000,
delay: 2000,
outWidth: 960,
outHeight: 360,
width: 960,
height: 360,
caption: true,
controls: true,
autoPlay: true,
bullets: true,
onStep: function () {},
stopOnHover: 0
}, options);
options.loop = options.loop || Number.MAX_VALUE;
var $Elements = $this.find(".ws_images A");
var images = $Elements.find("IMG");
$Elements.each(function (index) {
var inner = $(this).html() || "";
var pos = inner.indexOf(">", inner);
if (pos >= 0) {
$(this).data("descr", inner.substr(pos + 1));
if (pos < inner.length - 1) {
$(this).html(inner.substr(0, pos + 1));
}
}
$(this).css({
'font-size': 0
});
});
var elementsCount = $Elements.length;
var frame = $("A.ws_frame", $this).get(0);
var curIdx = 0;
function go(index) {
index = (index % elementsCount + elementsCount) % elementsCount;
if (curIdx == index) {
return;
}
var current = effect.go(index, curIdx);
if (!current) {
return;
}
if (typeof current != "object") {
current = $Elements[index];
}
curIdx = index;
go2(index);
if (options.caption) {
setTitle(current);
}
options.onStep(curIdx);
}
var startX, startY, isMoving = 0;
var _this = $this.get(0);
if (_this.addEventListener) {
_this.addEventListener("touchmove", function (e) {
if (isMoving) {
var dx = startX - e.touches[0].pageX;
var dy = startY - e.touches[0].pageY;
if (Math.abs(dx) > 20 || Math.abs(dy) > 20) {
startX = startY = isMoving = 0;
forceGo(e, curIdx + (dx + dy > 0 ? -1 : 1));
}
}
}, false);
_this.addEventListener("touchstart", function (e) {
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = 1;
} else {
isMoving = 0;
}
}, false);
_this.addEventListener("touchend", function (e) {
isMoving = 0;
}, false);
}
function go2(index) {
if (options.bullets) {
setBullet(index);
}
if (frame) {
frame.setAttribute("href", $Elements.get(index).href);
frame.setAttribute("target", $Elements.get(index).target);
}
}
var autoPlayTimer;
function restartPlay() {
stopPlay();
if (options.autoPlay) {
autoPlayTimer = setTimeout(function () {
go(curIdx < elementsCount - 1 ? curIdx + 1 : 0);
if (!curIdx && !--options.loop) {
options.autoPlay = 0;
}
restartPlay();
}, options.delay + options.duration);
}
}
function stopPlay() {
if (autoPlayTimer) {
clearTimeout(autoPlayTimer);
}
autoPlayTimer = null;
}
function forceGo(event, index) {
stopPlay();
event.preventDefault();
go(index);
restartPlay();
}
$Elements.find("IMG").css("position", "absolute");
if (typeof options.effect == "string") {
options.effect = window["ws_" + options.effect];
}
var effect = new options.effect(options, images);
effect.init($(".ws_images", $this));
$Elements.find("IMG").css("visibility", "visible");
var ic = c = $(".ws_images", $this);
var t = "WOWSlider.com";
c = t ? $("<div></div>") : 0;
if (c) {
c.css({
position: "absolute",
right: "2px",
bottom: "2px",
padding: "0 0 0 0"
});
ic.append(c);
}
if (c && document.all) {
var f = $("<iframe src=\"javascript:false\"></iframe>");
f.css({
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
filter: "alpha(opacity=0)"
});
f.attr({
scrolling: "no",
framespacing: 0,
border: 0,
frameBorder: "no"
});
c.append(f);
}
if (options.controls) {
var $next_photo = $("<a href=\"#\" class=\"ws_next\">" + options.next + "</a>");
var $prev_photo = $("<a href=\"#\" class=\"ws_prev\">" + options.prev + "</a>");
$this.append($next_photo);
$this.append($prev_photo);
$next_photo.bind("click", function (e) {
forceGo(e, curIdx + 1);
});
$prev_photo.bind("click", function (e) {
forceGo(e, curIdx - 1);
});
}
function initBullets() {
var $bullets_cont = $this.find(".ws_bullets>div");
var $bullets = $("a", $bullets_cont);
$bullets.click(function (e) {
forceGo(e, $(e.target).index());
});
var $thumbs = $bullets.find("IMG");
if ($thumbs.length) {
var mainFrame = $("<div class=\"ws_bulframe\"/>").appendTo($bullets_cont);
var imgContainer = $("<div/>").css({
width: $thumbs.length + 1 + "00%"
}).appendTo($("<div/>").appendTo(mainFrame));
$thumbs.appendTo(imgContainer);
$("<span/>").appendTo(mainFrame);
var curIndex = -1;
function moveTooltip(index) {
if (index < 0) {
index = 0;
}
$($bullets.get(curIndex)).removeClass("ws_overbull");
$($bullets.get(index)).addClass("ws_overbull");
mainFrame.show();
var mainCSS = {
left: $bullets.get(index).offsetLeft - mainFrame.width() / 2
};
var contCSS = {
left: -$thumbs.get(index).offsetLeft
};
if (curIndex < 0) {
mainFrame.css(mainCSS);
imgContainer.css(contCSS);
} else {
if (!document.all) {
mainCSS.opacity = 1;
}
mainFrame.stop().animate(mainCSS, "fast");
imgContainer.stop().animate(contCSS, "fast");
}
curIndex = index;
}
$bullets.hover(function () {
moveTooltip($(this).index());
});
var hideTime;
$bullets_cont.hover(function () {
if (hideTime) {
clearTimeout(hideTime);
hideTime = 0;
}
moveTooltip(curIndex);
}, function () {
$bullets.removeClass("ws_overbull");
if (document.all) {
if (!hideTime) {
hideTime = setTimeout(function () {
mainFrame.hide();
hideTime = 0;
}, 400);
}
} else {
mainFrame.stop().animate({
opacity: 0
}, {
duration: "fast",
complete: function () {
mainFrame.hide();
}
});
}
});
$bullets_cont.click(function (e) {
forceGo(e, $(e.target).index());
});
}
}
function setBullet(new_index) {
$(".ws_bullets A", $this).each(function (index) {
if (index == new_index) {
$(this).addClass("ws_selbull");
} else {
$(this).removeClass("ws_selbull");
}
});
}
if (options.caption) {
$caption = $("<div class='ws-title' style='display:none'></div>");
$this.append($caption);
$caption.bind("mouseover", function (e) {
stopPlay();
});
$caption.bind("mouseout", function (e) {
restartPlay();
});
}
function setTitle(A) {
var title = $("img", A).attr("title");
var descr = $(A).data("descr");
var $Title = $(".ws-title", $this);
$Title.hide();
if (title || descr) {
$Title.html((title ? "<span>" + title + "</span>" : "") + (descr ? "<div>" + descr + "</div>" : ""));
showWithSlide($Title, {
direction: "left",
easing: "easeInOutExpo",
complete: function () {
if ($.browser.msie) {
$Title.get(0).style.removeAttribute("filter");
}
},
duration: 1000
});
}
}
if (options.bullets) {
initBullets();
}
go2(0);
if (options.caption) {
setTitle($Elements[0]);
}
if (options.stopOnHover) {
this.bind("mouseover", function (e) {
stopPlay();
});
this.bind("mouseout", function (e) {
restartPlay();
});
}
restartPlay();
function showWithSlide(element, options) {
var $ = jQuery;
element.stop(true, true);
var bkp_prop = {};
var props = ["position", "top", "bottom", "left", "right"];
for (var i = 0; i < props.length; i++) {
bkp_prop[props[i]] = element[0].style[props[i]];
}
element.show();
var wrap_props = {
width: element.outerWidth(true),
height: element.outerHeight(true),
'float': element.css("float"),
overflow: "hidden",
opacity: 0
},
wrapper = $("<div></div>").css({
fontSize: "100%",
background: "transparent",
border: "none",
margin: 0,
padding: 0
});
element.wrap(wrapper);
wrapper = element.parent();
if (element.css("position") == "static") {
wrapper.css({
position: "relative"
});
element.css({
position: "relative"
});
} else {
$.extend(wrap_props, {
position: element.css("position"),
zIndex: element.css("z-index")
});
$.each(["top", "left", "bottom", "right"], function (i, pos) {
wrap_props[pos] = element.css(pos);
if (isNaN(parseInt(wrap_props[pos], 10))) {
wrap_props[pos] = "auto";
}
});
element.css({
position: "relative",
top: 0,
left: 0,
right: "auto",
bottom: "auto"
});
}
wrapper.css(wrap_props).show();
var direction = options.direction || "left";
var ref = direction == "up" || direction == "down" ? "top" : "left";
var motion = direction == "up" || direction == "left" ? "pos" : "neg";
var distance = options.distance || (ref == "top" ? element.outerHeight({
margin: true
}) : element.outerWidth({
margin: true
}));
element.css(ref, motion == "pos" ? isNaN(distance) ? "-" + distance : -distance : distance);
var animation = {};
animation[ref] = (motion == "pos" ? "+=" : "-=") + distance;
wrapper.animate({
opacity: 1
}, {
duration: options.duration,
easing: options.easing
});
element.animate(animation, {
queue: false,
duration: options.duration,
easing: options.easing,
complete: function () {
for (var p in bkp_prop) {
element[0].style[p] = bkp_prop[p];
}
element.parent().replaceWith(element);
if (options.complete) {
options.complete();
}
}
});
}
return this;
};
jQuery.extend(jQuery.easing, {
easeInOutExpo: function (x, t, b, c, d) {
if (t == 0) {
return b;
}
if (t == d) {
return b + c;
}
if ((t /= d / 2) < 1) {
return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
}
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
});
// -----------------------------------------------------------------------------------
// http://wowslider.com/
// JavaScript Wow Slider is a free software that helps you easily generate delicious
// slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
// Last updated: 2011-06-16
//
//***********************************************
// Obfuscated by Javascript Obfuscator
// http://javascript-source.com
//***********************************************
jQuery("#wowslider-container1").wowSlider({
effect: "blinds",
prev: "",
next: "",
duration: 10 * 100,
delay: 20 * 100,
outWidth: 960,
outHeight: 360,
width: 960,
height: 360,
autoPlay: true,
stopOnHover: false,
loop: false,
bullets: true,
caption: true,
controls: true
});
Dan akhirnya hilang sudah watermark yang cukup mengganggu
Oke selamat berkreasi semuanya, semoga artikel sederhana ini berguna buat kalian… GBU All…
Related posts:
