Cek Nama Domain
Artikel Terbaru
Komentar Terbaru
- ST287594
@Herman: you're welcome ;... - Herman Hermit
Siiiip banget, thank you.... - gandeng.ajig
ketemu :D thank atas bant... - ekomunity
mantabs om lanjut........... - ST287594
Untuk bapak Warseno, kami... - warseno
pd tanggal 14 Jan saya me... - ST287594
Terima kasih mas gandeng.... - gandeng.ajig
saya sudah coba om..terim... - ST287594
Itu bisa juga disebabkan... - PUTRA83
Mas saya sudah coba tapi...
Tutvill di Facebook
envato marketplace
Selamat Bertutorial
ST287594
Web ini didedikasikan untuk seluruh member sitekno yang masih merasa kesulitan untuk membangun websitenya. Semoga semua tutorial yang disajikan di sini dapat sesuai dengan harapan. Selamat belajar ;-)... Semangat Pagi !!!
Kategori
Arsip
SLINK
Partner Tuvill
Membuat galeri foto flickr anda lebih menarik
Di artikel sebelumnya (membuat gallery dengan flickr ) telah diuraikan bagaimana caranya anda dapat memuat gallery di situs web anda dengan memberdayakan foto galeri online flickr. Kali ini akan diuraikan bagaimana agar ketika foto / gambar anda di klik, tidak langsung menuju ke tempat foto / gambar anda di flickr, akan tetapi akan langsung memunculkan foto / gambar anda tersebut dalam ukuran yang sebenarnya langsung di situs web anda.
Di sini anda dianggap telah memiliki sebuah foto galeri yang dibuat sesuai dengan artikel membuat gallery dengan flickr.
Agar galeri foto anda dapat langsung memunculkan foto / gambar dalam ukuran sebenarnya di situs anda, silakan ikuti langkah-langkah di bawah ini:
- Masuk ke dalam artikel / custom page / panel yang anda gunakan untuk menampilkan foto galeri anda
- Klik tombol HTML di editor WYSIWYG anda
- Masukkan skrip di bawah ini ke dalam editor WYSIWYG anda :
<p>
<script src="http://sensakilla.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://sensakilla.com/js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>
<style type="text/css"><!--
div#fancy_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 30;
}
div#fancy_loading {
position: absolute;
height: 40px;
width: 40px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100;
}
div#fancy_loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_progress.png') no-repeat;
}
div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 20px 20px 40px 20px;
margin: 0;
background: transparent;
display: none;
}
div#fancy_inner {
position: relative;
width:100%;
height:100%;
background: #FFF;
}
div#fancy_content {
margin: 0;
z-index: 100;
position: absolute;
}
div#fancy_div {
background: #000;
color: #FFF;
height: 100%;
width: 100%;
z-index: 100;
}
img#fancy_img {
position: absolute;
top: 0;
left: 0;
border:0;
padding: 0;
margin: 0;
z-index: 100;
width: 100%;
height: 100%;
}
div#fancy_close {
position: absolute;
top: -12px;
right: -15px;
height: 30px;
width: 30px;
background: url('http://sitekno.com/user/share/themes/39/fancy_closebox.png') top left no-repeat;
cursor: pointer;
z-index: 181;
display: none;
}
#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none;
}
#fancy_ajax {
width: 100%;
height: 100%;
overflow: auto;
}
a#fancy_left, a#fancy_right {
background:none;
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
z-index: 111;
display: none;
outline: none;
overflow: hidden;
}
a#fancy_left {
left: 0px;
}
a#fancy_right {
right: 0px;
}
span.fancy_ico {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
z-index: 112;
cursor: pointer;
display: block;
}
span#fancy_left_ico {
left: -9999px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_left.png') no-repeat;
}
span#fancy_right_ico {
right: -9999px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_right.png') no-repeat;
}
a#fancy_left:hover, a#fancy_right:hover {
visibility: visible;
background-color: transparent;
}
a#fancy_left:hover span {
left: 20px;
}
a#fancy_right:hover span {
right: 20px;
}
#fancy_bigIframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
div#fancy_bg {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 70;
border: 0;
padding: 0;
margin: 0;
}
div.fancy_bg {
position: absolute;
display: block;
z-index: 70;
border: 0;
padding: 0;
margin: 0;
}
div#fancy_bg_n {
top: -20px;
left: 0;
width: 100%;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_n.png') repeat-x;
}
div#fancy_bg_ne {
top: -20px;
right: -20px;
width: 20px;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_ne.png') no-repeat;
}
div#fancy_bg_e {
right: -20px;
height: 100%;
width: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_e.png') repeat-y;
}
div#fancy_bg_se {
bottom: -20px;
right: -20px;
width: 20px;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_se.png') no-repeat;
}
div#fancy_bg_s {
bottom: -20px;
left: 0;
width: 100%;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_s.png') repeat-x;
}
div#fancy_bg_sw {
bottom: -20px;
left: -20px;
width: 20px;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_sw.png') no-repeat;
}
div#fancy_bg_w {
left: -20px;
height: 100%;
width: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_w.png') repeat-y;
}
div#fancy_bg_nw {
top: -20px;
left: -20px;
width: 20px;
height: 20px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_shadow_nw.png') no-repeat;
}
div#fancy_title {
position: absolute;
z-index: 100;
display: none;
}
div#fancy_title div {
color: #FFF;
font: bold 12px Arial;
padding-bottom: 3px;
white-space: nowrap;
}
div#fancy_title table {
margin: 0 auto;
}
div#fancy_title table td {
padding: 0;
vertical-align: middle;
}
td#fancy_title_left {
height: 32px;
width: 15px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_title_left.png') repeat-x;
}
td#fancy_title_main {
height: 32px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_title_main.png') repeat-x;
}
td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url('http://sitekno.com/user/share/themes/39/fancy_title_right.png') repeat-x;
}
--></style>
<script type="text/javascript"><!--
$(function(){
$(".gambar_flickr a").addClass("fancies");
$(".gambar_flickr a").attr("rel","group");
$(".gambar_flickr a img").each(function() {
var simg = $(this).attr("src");
var dimg = simg.replace("_s", "");
$(this).parent("a.fancies").attr("href",dimg);
$(this).parent("a.fancies").attr("title",$(this).attr("title"));
});
$(".gambar_flickr a.fancies").fancybox();
});
// --></script>
</p>
Tepat di bawah skrip yang anda gunakan untuk membuat foto galeri anda - Klik tombol "Update"
- Klik Tombol "Send" / "Kirim"
- Refresh / Reload halaman foto galeri di situs web anda
- Coba klik salah satu foto / gambar anda. Anda akan melihat bahwa foto / gambar yang anda klik tadi akan memunculkan gambar loader dan setelah beberapa saat akan memunculkan foto / gambar anda dalam ukuran yang sebenarnya
Sekian langkah-langkah untuk membuat foto galeri anda memiliki fungsi yang lebih menarik dan juga tidak langsung berpindah ke flickr ketika ada pengunjung yang mengklik salah satu foto / gambar anda, sehingga pengunjung dapat tetap berada di situs web anda sembari melihat foto / gambar anda dalam ukuran yang sebenarnya.
Sebagai contoh, anda dapat mecoba mengklik salah satu foto / gambar di bawah ini:
Selamat mencoba ;-).
keterangan:
- Tutorial ini dapat digunakan di seluruh website dengan atau tanpa engine sitekno
- Tutorial ini menggunakan javascript framework jquery sebagai library javascript
- Tutorial ini menggunakan plugin jquery fancybox untuk menambahkan fungsi
Tue, 29 Dec 2009 @16:06
5 Komentar
 |
Thu, 31 Dec 2009 @15:43Rama |
 |
Fri, 1 Jan 2010 @18:54Abymanyoo |
 |
Wed, 6 Jan 2010 @15:03ST287594 |
Script yang perlu dirubah, hanya di bagian javascriptnya saja mas di bagian:
<script type="text/javascript"><!--
$(function(){
$(".gambar_flickr a").addClass("fancies");
. . . dst
mas abymanyoo cukup menggantikan nama *.gambar_flickr* ke *#flickr_badge_wrapper*, gantikan seluruh *.gambar_flickr* ke *#flickr_badge_wrapper*, ingat, hanya *.gambar_flickr* saja, dan biarkan script lainnya seperti semula. Selamat mencoba ;-)
@Rama: Silahkan gan... terima kasih sudah mengunjungi web kami :D, senang artikelnya dapat berguna :)
 |
Sat, 23 Jan 2010 @15:42andhika |
|
Mon, 25 Jan 2010 @23:47ST287594 |
Tulis Komentar
Copyright © 2010 ST287594 @tutvill.com · All Rights Reserved
Proudly Powered by
sitekno