Seditio ve Ldu hakkında sınırsız arama yapın
 
 
> 1 <

Etiketler: javascript ımage gallery

Author Message

Xiao

Moderators


Online status

868 posts
http://www.seditione.com
Pagerank: 0

Location: Turkey Trabzon
Occupation: Orman Mühendisi
Age: 30

#27956   2008-05-25 16:45 GMT      

SE Javascript Image Gallery
Demo: http://www.gsfan.org/sayfa.php?al=galeri
Kurulum:

http://www.seditione.com/se_gallery.rar dosyasını indirin ve içindeki img klasörünü sitenizin ana dizinine atın.

public_html/img
public_html/img/galeri.php
public_html/img/index.html


daha sonra sitenizde herhangi bir kategori altında bir başlık oluşturun.
Sayfa Adı : Galeri
Açıklama : İstediğinizi yazın
Allias : galeri

aşağıda vermiş olduğum kodları textboxer içine kopyalayın ve gönder deyin.Daha sonra yönetim paneline girin ve onay sırasında bekleyen Galeri isimli sayfayı düzenle deyin.Parsing seçeneğinden HTML i seçin.Kaydet deyin ve tekrar onay sayfasına gidin.Daha sonra galeri isimli sayfayı onaylayın.

siteadi.com/page.php?al=galeri şeklinde galerinize giriş yapabilirsiniz.

Özellikler:

Anadizine atmış olduğunuz img klasörüne yüklediğiniz her resim galeri de otomatik olarak görünür.
Dosyaları alfabetik atmanıza gerek yok çünkü son atılan resim ilk sırada çıkıyor.
Resimler belirli boyutlarda görüntülenir ve resmin üzerine tıkladığınızda popup olarak yeni pencerede açılır.

Ayarlar:

var dimension="3x5" : yan yana 3 adet alt alta 5 adet toplam 15 resim 1 sayfada gösterilir.15 ve üzeri 2,3 gibi diğer sayfalara otomatik geçiş yapar.

width=500px, height=400px : açılan popup sayfasının boyutlarını ayarlar.


Code:
<div align="center"><style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
<script src="img/galeri.php" type="text/javascript"></script>

<script type="text/javascript">


var dimension="3x5" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="img/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[1, "Fotoğraf "]

//Sort images by date? ("asc", "desc", or "")
//"desc" for example causes the newest images to show up first in the gallery
//"" disables this feature, so images are sorted by file name (default)
var gsortorder="desc"

//By default, each image hyperlinks to itself.
//However, if you wish them to link to larger versions of themselves
//Specify the directory in which the larger images are located
//The file names of these large images should mirror those of the original
//Enter a blank string ("") to disable this option
var targetlinkdir="img/"

/////No need to edit beyond here///////////////////

function sortbydate(a, b){ //Sort images function
if (gsortorder=="asc") //sort by file date: older to newer
return new Date(a[1])-new Date(b[1])
else if (gsortorder=="desc") //sort by file date: newer to older
return new Date(b[1])-new Date(a[1])
}

if (gsortorder=="asc" || gsortorder=="desc")
galleryarray.sort(sortbydate)

var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}

var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

</script>

<!--Below HTML code refers to the navigational links for the gallery-->

<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Sayfa'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div></div>
Haziran 2008 Seditio Site Yar??mas? >> http://www.seditione.com

Kaan

Moderators


Online status

2,082 posts
http://www.ntka.org
Pagerank: 2

Location: Turkey
Occupation: Destek
Age: 25

#27960   2008-05-25 16:56 GMT      
Saolasın bunu pluginde yapabilirsin basit bişey olarak.

Xiao

Moderators


Online status

868 posts
http://www.seditione.com
Pagerank: 0

Location: Turkey Trabzon
Occupation: Orman Mühendisi
Age: 30

#27963   2008-05-25 17:01 GMT      

plugin yapmaya değmeyecek kadar basit olduğu için böyle yayınladım.Ayrıca şunu söylemek istiyorum.Son eklenen resimleri ana sayfada göstermek isteyenler aynı kodları kullanabilirler.Yapmaları gereken resmin boyutunu blog boyutuna göre ayarlamaları daha sonra 3*5 seçeneğini 1*5 gibi tek blog halinde alt alta 5 tane gösterebilir.Daha sonraki seçenek ise sayfalama olacaktır.Sayfa linklerini gösteren kodu sildiğiniz zaman son eklenen resimler anasayfa da da gösterilir
Haziran 2008 Seditio Site Yar??mas? >> http://www.seditione.com

Kaan

Moderators


Online status

2,082 posts
http://www.ntka.org
Pagerank: 2

Location: Turkey
Occupation: Destek
Age: 25

#27966   2008-05-25 17:05 GMT      
Güzel çalışma

emremix

Moderators


Online status

483 posts

Location: Turkey
Occupation: emremix
Age:

#27980   2008-05-25 18:11 GMT      
2. bir güzel iş daha tebrikler Gökhan.
Sudo apt-get Alcohol
Forever Ubuntu :)

Cevher

Members


Online status

15 posts
http://www.cevherforum.com
Pagerank: 0

Location: Turkey
Occupation:
Age: 17

#30670   2008-06-24 19:31 GMT      
An error occured, maybe a Yanlış Adres ?

Bu hatayı Aldım Localhost Olduğundan Olabilirmi

deasn

Bilgili Üye


Online status

131 posts
http://www.kucukpalabiyik.com
Pagerank: 2

Location: Turkey
Occupation: deasn
Age: 23

#37657   2008-08-27 23:51 GMT      
Selam arkadaslar bundan 10 gun once galeri eklentisi sorunsuz calısıyordu siteye seo kuruldu yine calısıyordu.. Yeni tema atılınca resim sayısını yukseltmek istedim... Düzenleye tıkladım ve resim sayısını artırdım kaydet dedim :S demez olaydım ve resım olarak degıl galeri kodları cıktı ve bırdaha düzeltemedim?

http://www.kucukpalabiyik.com/i-245-Galeri.html

neden kaynaklanıyor acaba yardımcı olurmusunuz..

Html de actım ama :S

freedom

Members


Online status

80 posts
http://www.LearninG-pC.cOm
Pagerank: 0

Location: Australia
Occupation:
Age:

#37674   2008-08-28 17:30 GMT      
Yapamadim arkadaslar yardimci olurmusunuz ?
WebCodeR.
> 1 <

Benzer konular (Similar topics) #BETA

Keywords (beta):

Forum Arşiv (beta):

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36] [37] [38] [39] [40] [41] [42] [43] [44] [45] [46] [47] [48] [49] [50] [51] [52] [53] [54] [55] [56] [57] [58] [59] [60] [61] [62] [63] [64] [65] [66] [67] [68] [69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108] [109] [110] [111] [112] [113] [114] [115] [116] [117] [118] [119] [120] [121] [122] [123] [124] [125] [126] [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145] [146] [147] [148] [149] [150] [151] [152] [153] [154] [155] [156] [157] [158] [159] [160] [161] [162] [163] [164] [165] [166] [167] [168] [169] [170] [171] [172] [173] [174] [175] [176] [177] [178] [179] [180] [181] [182] [183] [184] [185] [186] [187] [188] [189] [190] [191] [192] [193] [194] [195] [196] [197] [198] [199] [200] [201] [202] [203] [204] [205] [206] [207] [208] [209] [210] [211] [212] [213] [214] [215] [216] [217] [218] [219] [220] [221] [222] [223] [224] [225] [226] [227] [228] [229] [230] [231] [232] [233] [234] [235]