Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:
onclick = function() { window.open($(this).attr('rel')); }Tapi Saya pikir, menggunakan JQuery pada Imageflow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan Imageflow bisa bekerja tanpa JQuery! Jadi Saya memutuskan untuk menggunakan ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut rel gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) seperti ini:
Dan berhasil!
Tahap 1: Mengedit Template
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode ini:
]]></b:skin>
Salin kode di bawah ini, kemudian letakkan di atasnya:
@charset "utf-8"; /* Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman URL: https://plus.google.com/108949996304093815163/about */ @media screen, projection { .imageflow { width:600px; /* Lebar Slideshow */ position:relative; text-align:left; visibility:hidden; margin:0 auto; font:normal normal 12px/1.4 Verdana,Tahoma,Arial,Sans-Serif; } .imageflow img { border:none; padding:0; margin:0; background:transparent; position:absolute; top:0; visibility:hidden; /* Enables bicubic image resampling for the IE7 */ -ms-interpolation-mode:bicubic; /* Uncomment this declaration to enable shadow around images -webkit-box-shadow:0 1px 10px black; -moz-box-shadow:0 1px 10px black; box-shadow:0 1px 10px black; */ } .imageflow p { margin:0 auto; text-align:center; } .imageflow .loading { border:1px solid white; height:15px; left:50%; margin-top:4px; margin-left:-106px; padding:5px; position:relative; visibility:visible; width:200px; } .imageflow .loading_bar { background:#fff; height:15px; visibility:visible; width:1%; } .imageflow .navigation { z-index:10000; margin-top:60px; /* Jarak atas slider terhadap daftar gambar */ } .imageflow .caption { font-weight:bold; position:relative; text-align:center; z-index:10001; text-shadow:0 1px 3px black; } .imageflow .caption a { text-decoration:none; color:white; } .imageflow .caption a:hover { text-decoration:underline; color:#8CD0D3; } .imageflow .scrollbar { border-bottom:1px solid #b3b3b3; position:relative; visibility:hidden; z-index:10002; height:1px; } .imageflow .slider { background:transparent url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat 50% 50%; height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow { cursor:pointer; height:14px; margin:20px 0 0 20px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow.pause {background:transparent url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat 50% 50%} .imageflow .slideshow.play {background:transparent url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat 50% 50%} .imageflow .images { overflow:hidden; white-space:nowrap; } .imageflow .button { cursor:pointer; height:17px; position:relative; width:17px; } .imageflow .previous { background:transparent url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') no-repeat 0 0; float:left; margin:-7px 0 0 -30px; } .imageflow .next { background:transparent url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') no-repeat 0 0; float:right; margin:-7px -30px 0 30px; } }
Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:
<script type='text/javascript'> //<![CDATA[ var loadingText = "Memuat gambar", animationSpeed = 50, aspectRatio = 1.964, circular = true, imageCursor = 'default', opacity = false, opacityArray = [10,8,5,3], imagesHeight = 0.5, imageScaling = true, percentLandscape = 200, percentOther = 100, preloadImages = true, slider = true, sliderCursor = 'e-resize', sliderWidth = 14, scrollbarP = 0.7, onClick = function() {}, startID = 1, slideshow = true, slideshowSpeed = 1500, slideshowAutoplay = false, startAnimation = false, xStep = 200; //]]> </script> <script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></script>Klik Simpan Template.
Tahap 2: Meletakkan Slideshow
Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<script type="text/javascript"> var showPostDate_g = false, showComm_g = false, slideOpenNewTab = true, idMode = true, slidebyLabels = false, slideLabelName = "Mengenai", pBlank = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png", text = "Komentar", numposts_g = 100, home_page = "http://U-Stars.blogspot.com"; </script> <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.
Sumber : Dte
By : Me Galaxy
Tidak ada komentar:
Posting Komentar