19 Kası m 2017, Pazar, 11:15
SON YAYINLANAN

Carousel Galeri

jQuery tabanlı resimlerinizi daha hoş gösterebileceğiniz güzel bir galeri…

DEMOYU İNCELE

Kurulum:

Aşağıdaki kodları html dosyanızda <head> kodundan sonra ekleyin

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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript" src="stepcarousel.js">
 
</script>
 
<style type="text/css">
 
.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 470px; /*Width of Carousel Viewer itself*/
height: 360px; /*Height should enough to fit largest content's height*/
}
 
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
 
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 450px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
 
</style>
 
<script type="text/javascript">
 
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['leftnav.png', -5, 180], rightnav: ['rightnav.png', -20, 180]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
 
</script>

Galerinizin gözükmesini istediğiniz yere aşağıdaki örnekteki gibi kodları <body> kodundan sonra ekleyin

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
<div id="mygallery" class="stepcarousel">
<div class="belt">
 
<div class="panel">
<img src="images/manzara1.jpg" />
</div>
 
<div class="panel">
<img src="images/manzara2.jpg" />
</div>
 
<div class="panel">
<img src="images/manzara3.jpg" />
</div>
 
<div class="panel">
<img src="images/manzara1.jpg" />
</div>
 
<div class="panel">
<img src="images/manzara2.jpg" />
</div>
 
<div class="panel">
<img src="images/manzara3.jpg" />
</div>
 
</div>
</div>
 
<p id="mygallery-paginate" style="width: 470px; text-align:center">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
</p>

Son olarak aşağıdaki dosyalar indirin ve html dosyalarınız ile aynı dizine atın.

İNDİR
Rar şifresi: www.ajaxkod.com

İndirdiğiniz dosyaları oluşturduğunuz .html dosyası ile aynı dizine atmanız gerekmektedir.
Örneğin html dosyanız
www.ajaxkod.com/deneme.html
ise dosyaların konumu
www.ajaxkod.com/deneme.js
gibi olması gerekmektedir.

Yorum Yaz

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *

manset3
3D SlideShow

Resimlerinizi sergilemede kullanabileceğiniz harika bir 3 boyutlu slideshow. Kurulum: Aşağıdaki kodları html dosyanızda <head> kodundan sonra ekleyin. Slideshow'da gözükecek resimleri...

Kapat