 |
Javascript ile Sahibinden.com benzeri resim galerisi
|
 |
#5014 |
|
Kaan
User is:
  Posts: 2772
Ülke:
 İstanbul - 34Meslek: Serbest Meslek
Age: 43
|
Javascript ile Sahibinden.com benzeri resim galerisi
 Sahibinden.com gibi otomobil, emlak sat??? yap?lan sitelerde ?r?n?n farkl? resimlerini g?r?nt?lemek ?zere s?k?a kullan?lan ([img]http://www.egonomik.com/script/javascript-resim-goster/[/img]) ve tasar?mc?lar taraf?ndan ?iddetle aran?lan scriptlerden biri. Asl?nda benim tasarlad???m bu ?rnek tam olarak mevzubahis sitelerdeki gibi ?al??m?yor, ben olay? biraz daha basit tekniklerle halletmeye ?al??t?m. Script, iki farkl? metod ile k???k resimlere t?kland???nda b?y?k resmin de?i?mesini sa?l?yor; birincisi b?y?k resmin javascript ile direkt olarak de?i?tirilmesi, ikincisi ise b?y?k resmi ta??yan div’in i?erisine innerHTML vesilesiyle html import edilmesi. Her iki metodun da kendine g?re avantaj ve dezavantajlar? var, mesela b?y?k resim y?klenirken resmi ta??yan div’e arkaplan olarak atanan loading ikonunun g?r?nt?lenmesi i?in innerHTML kullanmak daha mant?kl?. D??ar?dan herhangi bir k?t?phane/dosya import edilmesine gerek b?rakmayan, t?m i?i g?ren javascript kodlar?m?z ?u ?ekilde: : ava]<script type="text/javascript"> function myResim(aydi){ // Y?ntem 1: Resmi de?i?tirme // document.myresim.src = ""+ aydi +""; // Y?ntem 2: Ta??y?c? div'e html import etme document.getElementById("resimdiv").innerHTML = "<img name=\"myresim\" src=\""+ aydi +"\" />"; } </script> Bu fonksiyona g?re; y?ntem 1'de k???k resim linkimiz <a href="javascript:;" onclick="myResim('resim-1.jpg');">resim 1</a> ?eklinde olacak ve bu linke t?kland???nda myresim id'li b?y?k resim resim-1.jpg olarak de?i?ecek. y?ntem 2'de resim linkimiz yine <a href="javascript:;" onclick="myResim('resim-1.jpg');">resim 1</a> ?eklinde olacak ve bu linke t?kland???nda resimdiv id'li ta??y?c? i?inde resim-1.jpg dosyas? g?r?nt?lenecek. Detayl? kaynak kodu: : tml]<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /> <title>Javascript resim scripti</title> <script type="text/javascript"> function myResim(aydi){ // Y?ntem 1: Resmi de?i?tirme // document.myresim.src = ""+ aydi +""; // Y?ntem 2: Ta??y?c? div'e html import etme document.getElementById("resimdiv").innerHTML = "<img name=\"myresim\" src=\""+ aydi +"\" />"; } </script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> <h2>Javascript resim scripti</h2> <div id="container" align="center"> <div id="resimdiv" name="resimdiv"> <img name="myresim" src="http://www.site.com/wallpaper/grunge/grunge-wallpaper-01.jpg" /> </div> <div id="thumb"> <a href="javascript:;" onclick="myResim('http://www.site.com/wallpaper/grunge/grunge-wallpaper-02.jpg');"><img src="images/resim1.jpg" width="100" /></a> <a href="javascript:;" onclick="myResim('http://www.site.com/wallpaper/grunge/grunge-wallpaper-09.jpg');"><img src="images/resim2.jpg" width="100" /></a> <a href="javascript:;" onclick="myResim('http://www.site.com/wallpaper/grunge/grunge-wallpaper-01.jpg');"><img src="images/resim3.jpg" width="100" /></a> <a href="javascript:;" onclick="myResim('http://www.site.com/wallpaper/grunge/grunge-wallpaper-18.jpg');"><img src="images/resim4.jpg" width="100" /></a> <a href="javascript:;" onclick="myResim('http://www.site.com/wallpaper/grunge/grunge-wallpaper-03.jpg');"><img src="images/resim5.jpg" width="100" /></a> </div> </div> </center> </body> </html> Stil dosyas? (style.css): : ss]body { color: #6F6F6D; font-family: Georgia; font-size: 10px; } #container { width: 580px; padding-top: 15px; padding-bottom: 15px; border: 1px solid #e2e2e2; background: #F5F5F5; margin: 10px; } #resimdiv { width: 400px; background-color: #91918E; background-image: url('images/loading.gif'); background-repeat: no-repeat; background-position: center; } #resimdiv img { width: 400px; height: 300px; border: 2px solid #e2e2e2; } #thumb { margin-top: 15px; } #thumb img { width: 100px; height: 75px; border: 2px solid #e2e2e2; } Scriptin detayl? ?rne?i: Demo Scripti ?ndir (160 Kb): Download |
Emlak, Oto Galeri, Rent A Car, ?iir, Edebiyat Script Sipari?lerinizi Verebilirsiniz. Detaylar ??in: kaan@ntka.org Seditio 170 ?ndir Capte M?zik ?ndir Seditio Toolbar ?ndir |
 |
 |
