23 Eylül 2017, Cumartesi, 4:51
SON YAYINLANAN

3D SlideShow

Resimlerinizi sergilemede kullanabileceğiniz harika bir 3 boyutlu slideshow.

DEMOYU İNCELE

Kurulum:

Aşağıdaki kodları html dosyanızda <head> kodundan sonra ekleyin. Slideshow’da gözükecek resimleri bu kodlar arasından düzenlemeniz gerekmektedir. (images/manzara1.jpg, images/manzara2.jpg, images/manzara3.jpg)

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
<style>
 /* CSS for custom nav controls of Cube Slider 2. Remove if desired */
 
ul.cubeslider2-navarea{
list-style: none;
overflow: hidden;
}
 
ul.cubeslider2-navarea li{
display: block;
float: left;
cursor: pointer;
padding: 7px;
margin:right: 5px;
}
 
ul.cubeslider2-navarea li:hover{
background: lightyellow;
}
 
</style>
 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='js/modernizr.custom.13303.js'></script>
<script type='text/javascript' src='js/jquery.shockwave.js'>
 
</script> 
<script type='text/javascript' src='js/jquery.shockwave.effects.js'></script>
 
 
<script>
 
var imagesDataArray = [ //For demos, define a single set of images to be used in all of the demos below
   {
      src: 'images/manzara1.jpg',
      url: '#',
      target: '_blank',  // default is _self, which opens in the same window (_blank in new window)
      description: 'Deneme kısa açıklama.'
   },
   {
      src: 'images/manzara2.jpg',
      url: '#',
      description: 'Deneme kısa açıklama.'
   },
   {
      src: 'images/manzara3.jpg',
			url: '#',
      description: 'Deneme kısa açıklama.'
   }
 
];
 
 
jQuery(function(){
 
	$('#unhookshow').shockwave(imagesDataArray, {
	 'slider-type': 'UnhookedSlider',
   'random-time-to-unhook': 1500, // in ms
   'free-fall-time': 150, // ms
	 'autostart-slideshow': true,
	 'maximum-slideshow-cycles': 2,
	 'slideshow-delay': 2000,
	 'duration': 100,
   'tiles-in-x': 5,
   'tiles-in-y': 5,
	 'show-permanent-description': false,
	 'standard-control-buttons-area': $('#unhookbuttons'),
	 'viewport-dimension': {width: 350, height: 262}
	});
 
 
 
	$('#flipedge').shockwave(imagesDataArray, {
	 'slider-type': 'FlipEdgeSlider',
   'tiles-in-x': 7,
   'tiles-in-y': 1,
   'fixed-rotation-axis': [1, 0, 0],
   'controller-default-wave-origin': ['50%', '50%'],
	 'autostart-slideshow': true
	});
 
	$('#cubeslider').shockwave(imagesDataArray, {
   'slider-type': 'CubeSlider',
   'rotation-duration': 600,  // in ms
   'tiles-in-x': 1,
   'tiles-in-y': 1,
   'rotation-axis': 'x',
	 'show-description-onimage': false,
	 'autostart-slideshow': true
	});
 
	$('#cubeslider2').shockwave(imagesDataArray, {
   'slider-type': 'CubeSlider',
   'rotation-duration': 600,  // in ms
   'tiles-in-x': 5,
   'tiles-in-y': 1,
   'wave-fixed-origin': [0, 0],
	 'standard-control-buttons-area': null,
   'next-slide-button': $('#cubeslider2next'),
   'previous-slide-button': $('#cubeslider2prev'),
   'play-pause-slideshow-buttons': $('#cubeslider2playpause')
	});
 
})
 
</script>

Resimlerinizi sergileyeceğiniz html dosyasına aşağıdaki 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
<h3>Örnek 1</h3>
<div id='unhookshow'></div>
<div id='unhookbuttons'></div>
 
 
 
<h3>Örnek 2</h3>
<div id='flipedge'></div>
 
 
<br />
 
<h3>Örnek 3</h3>
<div id='cubeslider'></div>
 
<br />
 
<h3>Örnek 4</h3>
<div id='cubeslider2'></div>
<ul class="cubeslider2-navarea">
  <li id="cubeslider2prev">Geri</li>
  <li id="cubeslider2playpause"><span class="play">Başlat</span><span class="pause">Durdur</span></li>
  <li id="cubeslider2next">İleri</li>
</ul>

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. Dosya içerisinde js, images ve icons klasörleri mevcuttur. Olşutudruğunu html dosyası ve diğer klasörler şu şekilde olmalıdır:
Örneğin html dosyanız
www.ajaxkod.com/deneme.html
ise klasörlerin konumu
www.ajaxkod.com/js/
www.ajaxkodçcom/images/
www.ajaxkod.com/icons/
şeklinde 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 *

manset2
Smooth Menü

Smooth Menü CSS tabanlı, jQuery destekli bir menüdür. Kullanımı ve düzenlenmesi gayet basittir. Yatay ve dikey olmak üzere iki çeşittir....

Kapat