|
Rudi Nugraha 022-9143 2968 0856 9101 1773 admin@bisniswebmatic.com Letnan I User ID : ST290198 |
 |
 |
 |
|
1. Bandwith Unlimited 2. Halaman (25) 3. Panel (10) 4. Kategori(25) 5. Custom Form (25) 6. Artikel (500) 7. komentar ( 100.000 ) Jika di hitung memakai MB sampai 200Mb. 8. Email 50 email dengan nama website anda support by:google 9. Theme yang sangat banyak dan menarik sehingga member cukup isi conten dan gambar! CMS ( Conten Manajemen System ) yang sangat memudahkan member mengelola websitenya secara pribadi tanpa butuh bantuan seorang webdeveloper atau webdesigner.
* Pada penyedia jasa pembuatan website lainnya untuk mendapatkan website seperti dari sitekno anda harus membayar Rp.500.000,-/tahun bahkan jutaan! |
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.
By : tutvill.com