منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
أفضل 10 أعضاء في هذا الأسبوع
ahd allah
 
Mohamed Nsr
 
JAR7
 
zaydoon
 
الزعيم
 
yobhy
 
Anas 1657
 
body14145
 
DeLeTe
 
عبد المجيد الذكي
 

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

كود html مثل السلادر شو .. يوجد مثال

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في الخميس 25 أكتوبر 2012 - 15:51

ابغا كود تومبيلات
مثال :
www . tajreebw.eb2a . com
يكون html ،،
ووين آحطه ؟!
Cool

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف AbEr sAbiL في الخميس 25 أكتوبر 2012 - 15:56

ممكن توضيح اخي

AbEr sAbiL
 
 

ذكر
عدد المساهمات : 4436
معدل النشاط : 6894

http://rahaf2romance.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف Bin-Awa!an في الخميس 25 أكتوبر 2012 - 16:05

مش فاهم السؤال

Bin-Awa!an
 
 

ذكر
عدد المساهمات : 256
معدل النشاط : 1869

http://kafeh.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في الخميس 25 أكتوبر 2012 - 17:23

الكود الى بهذا الرابط ..
www . tajreebw.eb2a . com
مطلوب كود مثله يكون html

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

كاتب هذه المساهمة مطرود حالياً من المنتدى - معاينة المساهمة

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف HiMa ElMaSrY في الخميس 25 أكتوبر 2012 - 18:02

جرب هذا سريعا
اضف هذا ف تشكيلات عامه
الرمز:
<div id="slider" style="position: relative; overflow: hidden;"><div id="iphone" class="slider" style="position: absolute; top: 250px; left: 0px; display: none; z-index: 3; opacity: 1; width: 716px; height: 250px;">
<a class="slider_content" href=""></a>
</div><div id="macbook" class="slider" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 716px; height: 250px;">
<a class="slider_content" href=""></a>
</div><div id="ipad" class="slider" style="position: absolute; top: 250px; left: 0px; display: none; z-index: 3; opacity: 1; width: 716px; height: 250px;">
<a class="slider_content" href=""></a>
</div>
</div><div id="slider_controls">
<ul>
<li>
<a id="slider_prev" href="#"></a>
</li>
<li>
<a id="slider_next" href="#"></a>
</li>
</ul>
</div>









<script src="cycle.js" type="text/javascript">
1/*!
2 * jQuery Cycle Plugin (with Transition Definitions)
3 * Examples and documentation at: http://jquery.malsup.com/cycle/
4 * Copyright (c) 2007-2009 M. Alsup
5 * Version: 2.73 (04-NOV-2009)
6 * Dual licensed under the MIT and GPL licenses:
7 * http://www.opensource.org/licenses/mit-license.php
8 * http://www.gnu.org/licenses/gpl.html
9 * Requires: jQuery v1.2.6 or later
10 *
11 * Originally based on the work of:
12 * 1) Matt Oakes
13 * 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
14 * 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
15 */
16;(function($) {
17
18var ver = '2.73';
19
20// if $.support is not defined (pre jQuery 1.3) add what I need
21if ($.support == undefined) {
22 $.support = {
23 opacity: !($.browser.msie)
24 };
25}
26
27function debug(s) {
28 if ($.fn.cycle.debug)
29 log(s);
30}
31function log() {
32 if (window.console && window.console.log)
33 window.console.log('[cycle] ' + Array.prototype.join.call(arguments,' '));
34 //$('body').append('<div>'+Array.prototype.join.call(arguments,' ')+'</div>');
35};
36
37// the options arg can be...
38// a number - indicates an immediate transition should occur to the given slide index
39// a string - 'stop', 'pause', 'resume', or the name of a transition effect (ie, 'fade', 'zoom', etc)
40// an object - properties to control the slideshow
41//
42// the arg2 arg can be...
43// the name of an fx (only used in conjunction with a numeric value for 'options')
44// the value true (only used in conjunction with a options == 'resume') and indicates
45// that the resume should occur immediately (not wait for next timeout)
46
47$.fn.cycle = function(options, arg2) {
48 var o = { s: this.selector, c: this.context };
49
50 // in 1.3+ we can fix mistakes with the ready state
51 if (this.length === 0 && options != 'stop') {
52 if (!$.isReady && o.s) {
53 log('DOM not ready, queuing slideshow');
54 $(function() {
55 $(o.s,o.c).cycle(options,arg2);
56 });
57 return this;
58 }
59 // is your DOM ready? http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
60 log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
61 return this;
62 }
63
64 // iterate the matched nodeset
65 return this.each(function() {
66 var opts = handleArguments(this, options, arg2);
67 if (opts === false)
68 return;
69
70 // stop existing slideshow for this container (if there is one)
71 if (this.cycleTimeout)
72 clearTimeout(this.cycleTimeout);
73 this.cycleTimeout = this.cyclePause = 0;
74
75 var $cont = $(this);
76 var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children();
77 var els = $slides.get();
78 if (els.length < 2) {
79 log('terminating; too few slides: ' + els.length);
80 return;
81 }
82
83 var opts2 = buildOptions($cont, $slides, els, opts, o);
84 if (opts2 === false)
85 return;
86
87 var startTime = opts2.continuous ? 10 : getTimeout(opts2.currSlide, opts2.nextSlide, opts2, !opts2.rev);
88
89 // if it's an auto slideshow, kick it off
90 if (startTime) {
91 startTime += (opts2.delay || 0);
92 if (startTime < 10)
93 startTime = 10;
94 debug('first timeout: ' + startTime);
95 this.cycleTimeout = setTimeout(function(){go(els,opts2,0,!opts2.rev)}, startTime);
96 }
97 });
98};
99
100// process the args that were passed to the plugin fn
101function handleArguments(cont, options, arg2) {
102 if (cont.cycleStop == undefined)
103 cont.cycleStop = 0;
104 if (options === undefined || options === null)
105 options = {};
106 if (options.constructor == String) {
107 switch(options) {
108 case 'stop':
109 cont.cycleStop++; // callbacks look for change
110 if (cont.cycleTimeout)
111 clearTimeout(cont.cycleTimeout);
112 cont.cycleTimeout = 0;
113 $(cont).removeData('cycle.opts');
114 return false;
115 case 'pause':
116 cont.cyclePause = 1;
117 return false;
118 case 'resume':
119 cont.cyclePause = 0;
120 if (arg2 === true) { // resume now!
121 options = $(cont).data('cycle.opts');
122 if (!options) {
123 log('options not found, can not resume');
124 return false;
125 }
126 if (cont.cycleTimeout) {
127 clearTimeout(cont.cycleTimeout);
128 cont.cycleTimeout = 0;
129 }
130 go(options.elements, options, 1, 1);
131 }
132 return false;
133 case 'prev':
134 case 'next':
135 var opts = $(cont).data('cycle.opts');
136 if (!opts) {
137 log('options not found, "prev/next" ignored');
138 return false;
139 }
140 $.fn.cycle[options](opts);
141 return false;
142 default:
143 options = { fx: options };
144 };
145 return options;
146 }
147 else if (options.constructor == Number) {
148 // go to the requested slide
149 var num = options;
150 options = $(cont).data('cycle.opts');
151 if (!options) {
152 log('options not found, can not advance slide');
153 return false;
154 }
155 if (num < 0 || num >= options.elements.length) {
156 log('invalid slide index: ' + num);
157 return false;
158 }
159 options.nextSlide = num;
160 if (cont.cycleTimeout) {
161 clearTimeout(cont.cycleTimeout);
162 cont.cycleTimeout = 0;
163 }
164 if (typeof arg2 == 'string')
165 options.oneTimeFx = arg2;
166 go(options.elements, options, 1, num >= options.currSlide);
167 return false;
168 }
169 return options;
170};
171
172function removeFilter(el, opts) {
173 if (!$.support.opacity && opts.cleartype && el.style.filter) {
174 try { el.style.removeAttribute('filter'); }
175 catch(smother) {} // handle old opera versions
176 }
177};
178
179// one-time initialization
180function buildOptions($cont, $slides, els, options, o) {
181 // support metadata plugin (v1.0 and v2.0)
182 var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
183 if (opts.autostop)
184 opts.countdown = opts.autostopCount || els.length;
185
186 var cont = $cont[0];
187 $cont.data('cycle.opts', opts);
188 opts.$cont = $cont;
189 opts.stopCount = cont.cycleStop;
190 opts.elements = els;
191 opts.before = opts.before ? [opts.before] : [];
192 opts.after = opts.after ? [opts.after] : [];
193 opts.after.unshift(function(){ opts.busy=0; });
194
195 // push some after callbacks
196 if (!$.support.opacity && opts.cleartype)
197 opts.after.push(function() { removeFilter(this, opts); });
198 if (opts.continuous)
199 opts.after.push(function() { go(els,opts,0,!opts.rev); });
200
201 saveOriginalOpts(opts);
202
203 // clearType corrections
204 if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
205 clearTypeFix($slides);
206
207 // container requires non-static position so that slides can be position within
208 if ($cont.css('position') == 'static')
209 $cont.css('position', 'relative');
210 if (opts.width)
211 $cont.width(opts.width);
212 if (opts.height && opts.height != 'auto')
213 $cont.height(opts.height);
214
215 if (opts.startingSlide)
216 opts.startingSlide = parseInt(opts.startingSlide);
217
218 // if random, mix up the slide array
219 if (opts.random) {
220 opts.randomMap = [];
221 for (var i = 0; i < els.length; i++)
222 opts.randomMap.push(i);
223 opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;});
224 opts.randomIndex = 0;
225 opts.startingSlide = opts.randomMap[0];
226 }
227 else if (opts.startingSlide >= els.length)
228 opts.startingSlide = 0; // catch bogus input
229 opts.currSlide = opts.startingSlide = opts.startingSlide || 0;
230 var first = opts.startingSlide;
231
232 // set position and zIndex on all the slides
233 $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
234 var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
235 $(this).css('z-index', z)
236 });
237
238 // make sure first slide is visible
239 $(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case
240 removeFilter(els[first], opts);
241
242 // stretch slides
243 if (opts.fit && opts.width)
244 $slides.width(opts.width);
245 if (opts.fit && opts.height && opts.height != 'auto')
246 $slides.height(opts.height);
247
248 // stretch container
249 var reshape = opts.containerResize && !$cont.innerHeight();
250 if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
251 var maxw = 0, maxh = 0;
252 for(var j=0; j < els.length; j++) {
253 var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
254 if (!w) w = e.offsetWidth;
255 if (!h) h = e.offsetHeight;
256 maxw = w > maxw ? w : maxw;
257 maxh = h > maxh ? h : maxh;
258 }
259 if (maxw > 0 && maxh > 0)
260 $cont.css({width:maxw+'px',height:maxh+'px'});
261 }
262
263 if (opts.pause)
264 $cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});
265
266 if (supportMultiTransitions(opts) === false)
267 return false;
268
269 // apparently a lot of people use image slideshows without height/width attributes on the images.
270 // Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
271 var requeue = false;
272 options.requeueAttempts = options.requeueAttempts || 0;
273 $slides.each(function() {
274 // try to get height/width of each slide
275 var $el = $(this);
276 this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
277 this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
278
279 if ( $el.is('img') ) {
280 // sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when
281 // an image is being downloaded and the markup did not include sizing info (height/width attributes);
282 // there seems to be some "default" sizes used in this situation
283 var loadingIE = ($.browser.msie && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
284 var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
285 var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);
286 var loadingOther = (this.cycleH == 0 && this.cycleW == 0 && !this.complete);
287 // don't requeue for images that are still loading but have a valid size
288 if (loadingIE || loadingFF || loadingOp || loadingOther) {
289 if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever
290 log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH);
291 setTimeout(function() {$(o.s,o.c).cycle(options)}, opts.requeueTimeout);
292 requeue = true;
293 return false; // break each loop
294 }
295 else {
296 log('could not determine size of image: '+this.src, this.cycleW, this.cycleH);
297 }
298 }
299 }
300 return true;
301 });
302
303 if (requeue)
304 return false;
305
306 opts.cssBefore = opts.cssBefore || {};
307 opts.animIn = opts.animIn || {};
308 opts.animOut = opts.animOut || {};
309
310 $slides.not(':eq('+first+')').css(opts.cssBefore);
311 if (opts.cssFirst)
312 $($slides[first]).css(opts.cssFirst);
313
314 if (opts.timeout) {
315 opts.timeout = parseInt(opts.timeout);
316 // ensure that timeout and speed settings are sane
317 if (opts.speed.constructor == String)
318 opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed);
319 if (!opts.sync)
320 opts.speed = opts.speed / 2;
321 while((opts.timeout - opts.speed) < 250) // sanitize timeout
322 opts.timeout += opts.speed;
323 }
324 if (opts.easing)
325 opts.easeIn = opts.easeOut = opts.easing;
326 if (!opts.speedIn)
327 opts.speedIn = opts.speed;
328 if (!opts.speedOut)
329 opts.speedOut = opts.speed;
330
331 opts.slideCount = els.length;
332 opts.currSlide = opts.lastSlide = first;
333 if (opts.random) {
334 opts.nextSlide = opts.currSlide;
335 if (++opts.randomIndex == els.length)
336 opts.randomIndex = 0;
337 opts.nextSlide = opts.randomMap[opts.randomIndex];
338 }
339 else
340 opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1;
341
342 // run transition init fn
343 if (!opts.multiFx) {
344 var init = $.fn.cycle.transitions[opts.fx];
345 if ($.isFunction(init))
346 init($cont, $slides, opts);
347 else if (opts.fx != 'custom' && !opts.multiFx) {
348 log('unknown transition: ' + opts.fx,'; slideshow terminating');
349 return false;
350 }
351 }
352
353 // fire artificial events
354 var e0 = $slides[first];
355 if (opts.before.length)
356 opts.before[0].apply(e0, [e0, e0, opts, true]);
357 if (opts.after.length > 1)
358 opts.after[1].apply(e0, [e0, e0, opts, true]);
359
360 if (opts.next)
361 $(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1)});
362 if (opts.prev)
363 $(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1)});
364 if (opts.pager)
365 buildPager(els,opts);
366
367 exposeAddSlide(opts, els);
368
369 return opts;
370};
371
372// save off original opts so we can restore after clearing state
373function saveOriginalOpts(opts) {
374 opts.original = { before: [], after: [] };
375 opts.original.cssBefore = $.extend({}, opts.cssBefore);
376 opts.original.cssAfter = $.extend({}, opts.cssAfter);
377 opts.original.animIn = $.extend({}, opts.animIn);
378 opts.original.animOut = $.extend({}, opts.animOut);
379 $.each(opts.before, function() { opts.original.before.push(this); });
380 $.each(opts.after, function() { opts.original.after.push(this); });
381};
382
383function supportMultiTransitions(opts) {
384 var i, tx, txs = $.fn.cycle.transitions;
385 // look for multiple effects
386 if (opts.fx.indexOf(',') > 0) {
387 opts.multiFx = true;
388 opts.fxs = opts.fx.replace(/\s*/g,'').split(',');
389 // discard any bogus effect names
390 for (i=0; i < opts.fxs.length; i++) {
391 var fx = opts.fxs[i];
392 tx = txs[fx];
393 if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) {
394 log('discarding unknown transition: ',fx);
395 opts.fxs.splice(i,1);
396 i--;
397 }
398 }
399 // if we have an empty list then we threw everything away!
400 if (!opts.fxs.length) {
401 log('No valid transitions named; slideshow terminating.');
402 return false;
403 }
404 }
405 else if (opts.fx == 'all') { // auto-gen the list of transitions
406 opts.multiFx = true;
407 opts.fxs = [];
408 for (p in txs) {
409 tx = txs[p];
410 if (txs.hasOwnProperty(p) && $.isFunction(tx))
411 opts.fxs.push(p);
412 }
413 }
414 if (opts.multiFx && opts.randomizeEffects) {
415 // munge the fxs array to make effect selection random
416 var r1 = Math.floor(Math.random() * 20) + 30;
417 for (i = 0; i < r1; i++) {
418 var r2 = Math.floor(Math.random() * opts.fxs.length);
419 opts.fxs.push(opts.fxs.splice(r2,1)[0]);
420 }
421 debug('randomized fx sequence: ',opts.fxs);
422 }
423 return true;
424};
425
426// provide a mechanism for adding slides after the slideshow has started
427function exposeAddSlide(opts, els) {
428 opts.addSlide = function(newSlide, prepend) {
429 var $s = $(newSlide), s = $s[0];
430 if (!opts.autostopCount)
431 opts.countdown++;
432 els[prepend?'unshift':'push'](s);
433 if (opts.els)
434 opts.els[prepend?'unshift':'push'](s); // shuffle needs this
435 opts.slideCount = els.length;
436
437 $s.css('position','absolute');
438 $s[prepend?'prependTo':'appendTo'](opts.$cont);
439
440 if (prepend) {
441 opts.currSlide++;
442 opts.nextSlide++;
443 }
444
445 if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
446 clearTypeFix($s);
447
448 if (opts.fit && opts.width)
449 $s.width(opts.width);
450 if (opts.fit && opts.height && opts.height != 'auto')
451 $slides.height(opts.height);
452 s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height();
453 s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width();
454
455 $s.css(opts.cssBefore);
456
457 if (opts.pager)
458 $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts);
459
460 if ($.isFunction(opts.onAddSlide))
461 opts.onAddSlide($s);
462 else
463 $s.hide(); // default behavior
464 };
465}
466
467// reset internal state; we do this on every pass in order to support multiple effects
468$.fn.cycle.resetState = function(opts, fx) {
469 fx = fx || opts.fx;
470 opts.before = []; opts.after = [];
471 opts.cssBefore = $.extend({}, opts.original.cssBefore);
472 opts.cssAfter = $.extend({}, opts.original.cssAfter);
473 opts.animIn = $.extend({}, opts.original.animIn);
474 opts.animOut = $.extend({}, opts.original.animOut);
475 opts.fxFn = null;
476 $.each(opts.original.before, function() { opts.before.push(this); });
477 $.each(opts.original.after, function() { opts.after.push(this); });
478
479 // re-init
480 var init = $.fn.cycle.transitions[fx];
481 if ($.isFunction(init))
482 init(opts.$cont, $(opts.elements), opts);
483};
484
485// this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
486function go(els, opts, manual, fwd) {
487 // opts.busy is true if we're in the middle of an animation
488 if (manual && opts.busy && opts.manualTrump) {
489 // let manual transitions requests trump active ones
490 $(els).stop(true,true);
491 opts.busy = false;
492 }
493 // don't begin another timeout-based transition if there is one active
494 if (opts.busy)
495 return;
496
497 var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide];
498
499 // stop cycling if we have an outstanding stop request
500 if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual)
501 return;
502
503 // check to see if we should stop cycling based on autostop options
504 if (!manual && !p.cyclePause &&
505 ((opts.autostop && (--opts.countdown <= 0)) ||
506 (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {
507 if (opts.end)
508 opts.end(opts);
509 return;
510 }
511
512 // if slideshow is paused, only transition on a manual trigger
513 if (manual || !p.cyclePause) {
514 var fx = opts.fx;
515 // keep trying to get the slide size if we don't have it yet
516 curr.cycleH = curr.cycleH || $(curr).height();
517 curr.cycleW = curr.cycleW || $(curr).width();
518 next.cycleH = next.cycleH || $(next).height();
519 next.cycleW = next.cycleW || $(next).width();
520
521 // support multiple transition types
522 if (opts.multiFx) {
523 if (opts.lastFx == undefined || ++opts.lastFx >= opts.fxs.length)
524 opts.lastFx = 0;
525 fx = opts.fxs[opts.lastFx];
526 opts.currFx = fx;
527 }
528
529 // one-time fx overrides apply to: $('div').cycle(3,'zoom');
530 if (opts.oneTimeFx) {
531 fx = opts.oneTimeFx;
532 opts.oneTimeFx = null;
533 }
534
535 $.fn.cycle.resetState(opts, fx);
536
537 // run the before callbacks
538 if (opts.before.length)
539 $.each(opts.before, function(i,o) {
540 if (p.cycleStop != opts.stopCount) return;
541 o.apply(next, [curr, next, opts, fwd]);
542 });
543
544 // stage the after callacks
545 var after = function() {
546 $.each(opts.after, function(i,o) {
547 if (p.cycleStop != opts.stopCount) return;
548 o.apply(next, [curr, next, opts, fwd]);
549 });
550 };
551
552 if (opts.nextSlide != opts.currSlide) {
553 // get ready to perform the transition
554 opts.busy = 1;
555 if (opts.fxFn) // fx function provided?
556 opts.fxFn(curr, next, opts, after, fwd);
557 else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ?
558 $.fn.cycle[opts.fx](curr, next, opts, after);
559 else
560 $.fn.cycle.custom(curr, next, opts, after, manual && opts.fastOnEvent);
561 }
562
563 // calculate the next slide
564 opts.lastSlide = opts.currSlide;
565 if (opts.random) {
566 opts.currSlide = opts.nextSlide;
567 if (++opts.randomIndex == els.length)
568 opts.randomIndex = 0;
569 opts.nextSlide = opts.randomMap[opts.randomIndex];
570 }
571 else { // sequence
572 var roll = (opts.nextSlide + 1) == els.length;
573 opts.nextSlide = roll ? 0 : opts.nextSlide+1;
574 opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
575 }
576
577 if (opts.pager)
578 $.fn.cycle.updateActivePagerLink(opts.pager, opts.currSlide);
579 }
580
581 // stage the next transtion
582 var ms = 0;
583 if (opts.timeout && !opts.continuous)
584 ms = getTimeout(curr, next, opts, fwd);
585 else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic
586 ms = 10;
587 if (ms > 0)
588 p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, !opts.rev) }, ms);
589};
590
591// invoked after transition
592$.fn.cycle.updateActivePagerLink = function(pager, currSlide) {
593 $(pager).each(function() {
594 $(this).find('a').removeClass('activeSlide').filter('a:eq('+currSlide+')').addClass('activeSlide');
595 });
596};
597
598// calculate timeout value for current transition
599function getTimeout(curr, next, opts, fwd) {
600 if (opts.timeoutFn) {
601 // call user provided calc fn
602 var t = opts.timeoutFn(curr,next,opts,fwd);
603 while ((t - opts.speed) < 250) // sanitize timeout
604 t += opts.speed;
605 debug('calculated timeout: ' + t + '; speed: ' + opts.speed);
606 if (t !== false)
607 return t;
608 }
609 return opts.timeout;
610};
611
612// expose next/prev function, caller must pass in state
613$.fn.cycle.next = function(opts) { advance(opts, opts.rev?-1:1); };
614$.fn.cycle.prev = function(opts) { advance(opts, opts.rev?1:-1);};
615
616// advance slide forward or back
617function advance(opts, val) {
618 var els = opts.elements;
619 var p = opts.$cont[0], timeout = p.cycleTimeout;
620 if (timeout) {
621 clearTimeout(timeout);
622 p.cycleTimeout = 0;
623 }
624 if (opts.random && val < 0) {
625 // move back to the previously display slide
626 opts.randomIndex--;
627 if (--opts.randomIndex == -2)
628 opts.randomIndex = els.length-2;
629 else if (opts.randomIndex == -1)
630 opts.randomIndex = els.length-1;
631 opts.nextSlide = opts.randomMap[opts.randomIndex];
632 }
633 else if (opts.random) {
634 if (++opts.randomIndex == els.length)
635 opts.randomIndex = 0;
636 opts.nextSlide = opts.randomMap[opts.randomIndex];
637 }
638 else {
639 opts.nextSlide = opts.currSlide + val;
640 if (opts.nextSlide < 0) {
641 if (opts.nowrap) return false;
642 opts.nextSlide = els.length - 1;
643 }
644 else if (opts.nextSlide >= els.length) {
645 if (opts.nowrap) return false;
646 opts.nextSlide = 0;
647 }
648 }
649
650 if ($.isFunction(opts.prevNextClick))
651 opts.prevNextClick(val > 0, opts.nextSlide, els[opts.nextSlide]);
652 go(els, opts, 1, val>=0);
653 return false;
654};
655
656function buildPager(els, opts) {
657 var $p = $(opts.pager);
658 $.each(els, function(i,o) {
659 $.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
660 });
661 $.fn.cycle.updateActivePagerLink(opts.pager, opts.startingSlide);
662};
663
664$.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) {
665 var a;
666 if ($.isFunction(opts.pagerAnchorBuilder))
667 a = opts.pagerAnchorBuilder(i,el);
668 else
669 a = '<a href="#">'+(i+1)+'</a>';
670
671 if (!a)
672 return;
673 var $a = $(a);
674 // don't reparent if anchor is in the dom
675 if ($a.parents('body').length === 0) {
676 var arr = [];
677 if ($p.length > 1) {
678 $p.each(function() {
679 var $clone = $a.clone(true);
680 $(this).append($clone);
681 arr.push($clone[0]);
682 });
683 $a = $(arr);
684 }
685 else {
686 $a.appendTo($p);
687 }
688 }
689
690 $a.bind(opts.pagerEvent, function(e) {
691 e.preventDefault();
692 opts.nextSlide = i;
693 var p = opts.$cont[0], timeout = p.cycleTimeout;
694 if (timeout) {
695 clearTimeout(timeout);
696 p.cycleTimeout = 0;
697 }
698 if ($.isFunction(opts.pagerClick))
699 opts.pagerClick(opts.nextSlide, els[opts.nextSlide]);
700 go(els,opts,1,opts.currSlide < i); // trigger the trans
701 return false;
702 });
703
704 if (opts.pagerEvent != 'click')
705 $a.click(function(){return false;}); // supress click
706
707 if (opts.pauseOnPagerHover)
708 $a.hover(function() { opts.$cont[0].cyclePause++; }, function() { opts.$cont[0].cyclePause--; } );
709};
710
711// helper fn to calculate the number of slides between the current and the next
712$.fn.cycle.hopsFromLast = function(opts, fwd) {
713 var hops, l = opts.lastSlide, c = opts.currSlide;
714 if (fwd)
715 hops = c > l ? c - l : opts.slideCount - l;
716 else
717 hops = c < l ? l - c : l + opts.slideCount - c;
718 return hops;
719};
720
721// fix clearType problems in ie6 by setting an explicit bg color
722// (otherwise text slides look horrible during a fade transition)
723function clearTypeFix($slides) {
724 function hex(s) {
725 s = parseInt(s).toString(16);
726 return s.length < 2 ? '0'+s : s;
727 };
728 function getBg(e) {
729 for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
730 var v = $.css(e,'background-color');
731 if (v.indexOf('rgb') >= 0 ) {
732 var rgb = v.match(/\d+/g);
733 return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
734 }
735 if (v && v != 'transparent')
736 return v;
737 }
738 return '#ffffff';
739 };
740 $slides.each(function() { $(this).css('background-color', getBg(this)); });
741};
742
743// reset common props before the next transition
744$.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) {
745 $(opts.elements).not(curr).hide();
746 opts.cssBefore.opacity = 1;
747 opts.cssBefore.display = 'block';
748 if (w !== false && next.cycleW > 0)
749 opts.cssBefore.width = next.cycleW;
750 if (h !== false && next.cycleH > 0)
751 opts.cssBefore.height = next.cycleH;
752 opts.cssAfter = opts.cssAfter || {};
753 opts.cssAfter.display = 'none';
754 $(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0));
755 $(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1));
756};
757
758// the actual fn for effecting a transition
759$.fn.cycle.custom = function(curr, next, opts, cb, speedOverride) {
760 var $l = $(curr), $n = $(next);
761 var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut;
762 $n.css(opts.cssBefore);
763 if (speedOverride) {
764 if (typeof speedOverride == 'number')
765 speedIn = speedOut = speedOverride;
766 else
767 speedIn = speedOut = 1;
768 easeIn = easeOut = null;
769 }
770 var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)};
771 $l.animate(opts.animOut, speedOut, easeOut, function() {
772 if (opts.cssAfter) $l.css(opts.cssAfter);
773 if (!opts.sync) fn();
774 });
775 if (opts.sync) fn();
776};
777
778// transition definitions - only fade is defined here, transition pack defines the rest
779$.fn.cycle.transitions = {
780 fade: function($cont, $slides, opts) {
781 $slides.not(':eq('+opts.currSlide+')').css('opacity',0);
782 opts.before.push(function(curr,next,opts) {
783 $.fn.cycle.commonReset(curr,next,opts);
784 opts.cssBefore.opacity = 0;
785 });
786 opts.animIn = { opacity: 1 };
787 opts.animOut = { opacity: 0 };
788 opts.cssBefore = { top: 0, left: 0 };
789 }
790};
791
792$.fn.cycle.ver = function() { return ver; };
793
794// override these globally if you like (they are all optional)
795$.fn.cycle.defaults = {
796 fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
797 timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
798 timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
799 continuous: 0, // true to start next transition immediately after current one completes
800 speed: 1000, // speed of the transition (any valid fx speed value)
801 speedIn: null, // speed of the 'in' transition
802 speedOut: null, // speed of the 'out' transition
803 next: null, // selector for element to use as click trigger for next slide
804 prev: null, // selector for element to use as click trigger for previous slide
805 prevNextClick: null, // callback fn for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement)
806 prevNextEvent:'click',// event which drives the manual transition to the previous or next slide
807 pager: null, // selector for element to use as pager container
808 pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
809 pagerEvent: 'click', // name of event which drives the pager navigation
810 pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
811 before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
812 after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
813 end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
814 easing: null, // easing method for both in and out transitions
815 easeIn: null, // easing for "in" transition
816 easeOut: null, // easing for "out" transition
817 shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
818 animIn: null, // properties that define how the slide animates in
819 animOut: null, // properties that define how the slide animates out
820 cssBefore: null, // properties that define the initial state of the slide before transitioning in
821 cssAfter: null, // properties that defined the state of the slide after transitioning out
822 fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
823 height: 'auto', // container height
824 startingSlide: 0, // zero-based index of the first slide to be displayed
825 sync: 1, // true if in/out transitions should occur simultaneously
826 random: 0, // true for random, false for sequence (not applicable to shuffle fx)
827 fit: 0, // force slides to fit container
828 containerResize: 1, // resize container to fit largest slide
829 pause: 0, // true to enable "pause on hover"
830 pauseOnPagerHover: 0, // true to pause when hovering over pager link
831 autostop: 0, // true to end slideshow after X transitions (where X == slide count)
832 autostopCount: 0, // number of transitions (optionally used with autostop to define X)
833 delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
834 slideExpr: null, // expression for selecting slides (if something other than all children is required)
835 cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
836 cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
837 nowrap: 0, // true to prevent slideshow from wrapping
838 fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
839 randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
840 rev: 0, // causes animations to transition in reverse
841 manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
842 requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
843 requeueTimeout: 250 // ms delay for requeue
844};
845
846})(jQuery);
847
848
849/*!
850 * jQuery Cycle Plugin Transition Definitions
851 * This script is a plugin for the jQuery Cycle Plugin
852 * Examples and documentation at: http://malsup.com/jquery/cycle/
853 * Copyright (c) 2007-2008 M. Alsup
854 * Version: 2.72
855 * Dual licensed under the MIT and GPL licenses:
856 * http://www.opensource.org/licenses/mit-license.php
857 * http://www.gnu.org/licenses/gpl.html
858 */
859(function($) {
860
861//
862// These functions define one-time slide initialization for the named
863// transitions. To save file size feel free to remove any of these that you
864// don't need.
865//
866$.fn.cycle.transitions.none = function($cont, $slides, opts) {
867 opts.fxFn = function(curr,next,opts,after){
868 $(next).show();
869 $(curr).hide();
870 after();
871 };
872}
873
874// scrollUp/Down/Left/Right
875$.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) {
876 $cont.css('overflow','hidden');
877 opts.before.push($.fn.cycle.commonReset);
878 var h = $cont.height();
879 opts.cssBefore ={ top: h, left: 0 };
880 opts.cssFirst = { top: 0 };
881 opts.animIn = { top: 0 };
882 opts.animOut = { top: -h };
883};
884$.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) {
885 $cont.css('overflow','hidden');
886 opts.before.push($.fn.cycle.commonReset);
887 var h = $cont.height();
888 opts.cssFirst = { top: 0 };
889 opts.cssBefore= { top: -h, left: 0 };
890 opts.animIn = { top: 0 };
891 opts.animOut = { top: h };
892};
893$.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) {
894 $cont.css('overflow','hidden');
895 opts.before.push($.fn.cycle.commonReset);
896 var w = $cont.width();
897 opts.cssFirst = { left: 0 };
898 opts.cssBefore= { left: w, top: 0 };
899 opts.animIn = { left: 0 };
900 opts.animOut = { left: 0-w };
901};
902$.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
903 $cont.css('overflow','hidden');
904 opts.before.push($.fn.cycle.commonReset);
905 var w = $cont.width();
906 opts.cssFirst = { left: 0 };
907 opts.cssBefore= { left: -w, top: 0 };
908 opts.animIn = { left: 0 };
909 opts.animOut = { left: w };
910};
911$.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
912 $cont.css('overflow','hidden').width();
913 opts.before.push(function(curr, next, opts, fwd) {
914 $.fn.cycle.commonReset(curr,next,opts);
915 opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
916 opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
917 });
918 opts.cssFirst = { left: 0 };
919 opts.cssBefore= { top: 0 };
920 opts.animIn = { left: 0 };
921 opts.animOut = { top: 0 };
922};
923$.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
924 $cont.css('overflow','hidden');
925 opts.before.push(function(curr, next, opts, fwd) {
926 $.fn.cycle.commonReset(curr,next,opts);
927 opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
928 opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
929 });
930 opts.cssFirst = { top: 0 };
931 opts.cssBefore= { left: 0 };
932 opts.animIn = { top: 0 };
933 opts.animOut = { left: 0 };
934};
935
936// slideX/slideY
937$.fn.cycle.transitions.slideX = function($cont, $slides, opts) {
938 opts.before.push(function(curr, next, opts) {
939 $(opts.elements).not(curr).hide();
940 $.fn.cycle.commonReset(curr,next,opts,false,true);
941 opts.animIn.width = next.cycleW;
942 });
943 opts.cssBefore = { left: 0, top: 0, width: 0 };
944 opts.animIn = { width: 'show' };
945 opts.animOut = { width: 0 };
946};
947$.fn.cycle.transitions.slideY = function($cont, $slides, opts) {
948 opts.before.push(function(curr, next, opts) {
949 $(opts.elements).not(curr).hide();
950 $.fn.cycle.commonReset(curr,next,opts,true,false);
951 opts.animIn.height = next.cycleH;
952 });
953 opts.cssBefore = { left: 0, top: 0, height: 0 };
954 opts.animIn = { height: 'show' };
955 opts.animOut = { height: 0 };
956};
957
958// shuffle
959$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
960 var i, w = $cont.css('overflow', 'visible').width();
961 $slides.css({left: 0, top: 0});
962 opts.before.push(function(curr,next,opts) {
963 $.fn.cycle.commonReset(curr,next,opts,true,true,true);
964 });
965 // only adjust speed once!
966 if (!opts.speedAdjusted) {
967 opts.speed = opts.speed / 2; // shuffle has 2 transitions
968 opts.speedAdjusted = true;
969 }
970 opts.random = 0;
971 opts.shuffle = opts.shuffle || {left:-w, top:15};
972 opts.els = [];
973 for (i=0; i < $slides.length; i++)
974 opts.els.push($slides[i]);
975
976 for (i=0; i < opts.currSlide; i++)
977 opts.els.push(opts.els.shift());
978
979 // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
980 opts.fxFn = function(curr, next, opts, cb, fwd) {
981 var $el = fwd ? $(curr) : $(next);
982 $(next).css(opts.cssBefore);
983 var count = opts.slideCount;
984 $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
985 var hops = $.fn.cycle.hopsFromLast(opts, fwd);
986 for (var k=0; k < hops; k++)
987 fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
988 if (fwd) {
989 for (var i=0, len=opts.els.length; i < len; i++)
990 $(opts.els[i]).css('z-index', len-i+count);
991 }
992 else {
993 var z = $(curr).css('z-index');
994 $el.css('z-index', parseInt(z)+1+count);
995 }
996 $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
997 $(fwd ? this : curr).hide();
998 if (cb) cb();
999 });
1000 });
1001 };
1002 opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
1003};
1004
1005// turnUp/Down/Left/Right
1006$.fn.cycle.transitions.turnUp = function($cont, $slides, opts) {
1007 opts.before.push(function(curr, next, opts) {
1008 $.fn.cycle.commonReset(curr,next,opts,true,false);
1009 opts.cssBefore.top = next.cycleH;
1010 opts.animIn.height = next.cycleH;
1011 });
1012 opts.cssFirst = { top: 0 };
1013 opts.cssBefore = { left: 0, height: 0 };
1014 opts.animIn = { top: 0 };
1015 opts.animOut = { height: 0 };
1016};
1017$.fn.cycle.transitions.turnDown = function($cont, $slides, opts) {
1018 opts.before.push(function(curr, next, opts) {
1019 $.fn.cycle.commonReset(curr,next,opts,true,false);
1020 opts.animIn.height = next.cycleH;
1021 opts.animOut.top = curr.cycleH;
1022 });
1023 opts.cssFirst = { top: 0 };
1024 opts.cssBefore = { left: 0, top: 0, height: 0 };
1025 opts.animOut = { height: 0 };
1026};
1027$.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) {
1028 opts.before.push(function(curr, next, opts) {
1029 $.fn.cycle.commonReset(curr,next,opts,false,true);
1030 opts.cssBefore.left = next.cycleW;
1031 opts.animIn.width = next.cycleW;
1032 });
1033 opts.cssBefore = { top: 0, width: 0 };
1034 opts.animIn = { left: 0 };
1035 opts.animOut = { width: 0 };
1036};
1037$.fn.cycle.transitions.turnRight = function($cont, $slides, opts) {
1038 opts.before.push(function(curr, next, opts) {
1039 $.fn.cycle.commonReset(curr,next,opts,false,true);
1040 opts.animIn.width = next.cycleW;
1041 opts.animOut.left = curr.cycleW;
1042 });
1043 opts.cssBefore = { top: 0, left: 0, width: 0 };
1044 opts.animIn = { left: 0 };
1045 opts.animOut = { width: 0 };
1046};
1047
1048// zoom
1049$.fn.cycle.transitions.zoom = function($cont, $slides, opts) {
1050 opts.before.push(function(curr, next, opts) {
1051 $.fn.cycle.commonReset(curr,next,opts,false,false,true);
1052 opts.cssBefore.top = next.cycleH/2;
1053 opts.cssBefore.left = next.cycleW/2;
1054 opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
1055 opts.animOut = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 };
1056 });
1057 opts.cssFirst = { top:0, left: 0 };
1058 opts.cssBefore = { width: 0, height: 0 };
1059};
1060
1061// fadeZoom
1062$.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) {
1063 opts.before.push(function(curr, next, opts) {
1064 $.fn.cycle.commonReset(curr,next,opts,false,false);
1065 opts.cssBefore.left = next.cycleW/2;
1066 opts.cssBefore.top = next.cycleH/2;
1067 opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
1068 });
1069 opts.cssBefore = { width: 0, height: 0 };
1070 opts.animOut = { opacity: 0 };
1071};
1072
1073// blindX
1074$.fn.cycle.transitions.blindX = function($cont, $slides, opts) {
1075 var w = $cont.css('overflow','hidden').width();
1076 opts.before.push(function(curr, next, opts) {
1077 $.fn.cycle.commonReset(curr,next,opts);
1078 opts.animIn.width = next.cycleW;
1079 opts.animOut.left = curr.cycleW;
1080 });
1081 opts.cssBefore = { left: w, top: 0 };
1082 opts.animIn = { left: 0 };
1083 opts.animOut = { left: w };
1084};
1085// blindY
1086$.fn.cycle.transitions.blindY = function($cont, $slides, opts) {
1087 var h = $cont.css('overflow','hidden').height();
1088 opts.before.push(function(curr, next, opts) {
1089 $.fn.cycle.commonReset(curr,next,opts);
1090 opts.animIn.height = next.cycleH;
1091 opts.animOut.top = curr.cycleH;
1092 });
1093 opts.cssBefore = { top: h, left: 0 };
1094 opts.animIn = { top: 0 };
1095 opts.animOut = { top: h };
1096};
1097// blindZ
1098$.fn.cycle.transitions.blindZ = function($cont, $slides, opts) {
1099 var h = $cont.css('overflow','hidden').height();
1100 var w = $cont.width();
1101 opts.before.push(function(curr, next, opts) {
1102 $.fn.cycle.commonReset(curr,next,opts);
1103 opts.animIn.height = next.cycleH;
1104 opts.animOut.top = curr.cycleH;
1105 });
1106 opts.cssBefore = { top: h, left: w };
1107 opts.animIn = { top: 0, left: 0 };
1108 opts.animOut = { top: h, left: w };
1109};
1110
1111// growX - grow horizontally from centered 0 width
1112$.fn.cycle.transitions.growX = function($cont, $slides, opts) {
1113 opts.before.push(function(curr, next, opts) {
1114 $.fn.cycle.commonReset(curr,next,opts,false,true);
1115 opts.cssBefore.left = this.cycleW/2;
1116 opts.animIn = { left: 0, width: this.cycleW };
1117 opts.animOut = { left: 0 };
1118 });
1119 opts.cssBefore = { width: 0, top: 0 };
1120};
1121// growY - grow vertically from centered 0 height
1122$.fn.cycle.transitions.growY = function($cont, $slides, opts) {
1123 opts.before.push(function(curr, next, opts) {
1124 $.fn.cycle.commonReset(curr,next,opts,true,false);
1125 opts.cssBefore.top = this.cycleH/2;
1126 opts.animIn = { top: 0, height: this.cycleH };
1127 opts.animOut = { top: 0 };
1128 });
1129 opts.cssBefore = { height: 0, left: 0 };
1130};
1131
1132// curtainX - squeeze in both edges horizontally
1133$.fn.cycle.transitions.curtainX = function($cont, $slides, opts) {
1134 opts.before.push(function(curr, next, opts) {
1135 $.fn.cycle.commonReset(curr,next,opts,false,true,true);
1136 opts.cssBefore.left = next.cycleW/2;
1137 opts.animIn = { left: 0, width: this.cycleW };
1138 opts.animOut = { left: curr.cycleW/2, width: 0 };
1139 });
1140 opts.cssBefore = { top: 0, width: 0 };
1141};
1142// curtainY - squeeze in both edges vertically
1143$.fn.cycle.transitions.curtainY = function($cont, $slides, opts) {
1144 opts.before.push(function(curr, next, opts) {
1145 $.fn.cycle.commonReset(curr,next,opts,true,false,true);
1146 opts.cssBefore.top = next.cycleH/2;
1147 opts.animIn = { top: 0, height: next.cycleH };
1148 opts.animOut = { top: curr.cycleH/2, height: 0 };
1149 });
1150 opts.cssBefore = { left: 0, height: 0 };
1151};
1152
1153// cover - curr slide covered by next slide
1154$.fn.cycle.transitions.cover = function($cont, $slides, opts) {
1155 var d = opts.direction || 'left';
1156 var w = $cont.css('overflow','hidden').width();
1157 var h = $cont.height();
1158 opts.before.push(function(curr, next, opts) {
1159 $.fn.cycle.commonReset(curr,next,opts);
1160 if (d == 'right')
1161 opts.cssBefore.left = -w;
1162 else if (d == 'up')
1163 opts.cssBefore.top = h;
1164 else if (d == 'down')
1165 opts.cssBefore.top = -h;
1166 else
1167 opts.cssBefore.left = w;
1168 });
1169 opts.animIn = { left: 0, top: 0};
1170 opts.animOut = { opacity: 1 };
1171 opts.cssBefore = { top: 0, left: 0 };
1172};
1173
1174// uncover - curr slide moves off next slide
1175$.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
1176 var d = opts.direction || 'left';
1177 var w = $cont.css('overflow','hidden').width();
1178 var h = $cont.height();
1179 opts.before.push(function(curr, next, opts) {
1180 $.fn.cycle.commonReset(curr,next,opts,true,true,true);
1181 if (d == 'right')
1182 opts.animOut.left = w;
1183 else if (d == 'up')
1184 opts.animOut.top = -h;
1185 else if (d == 'down')
1186 opts.animOut.top = h;
1187 else
1188 opts.animOut.left = -w;
1189 });
1190 opts.animIn = { left: 0, top: 0 };
1191 opts.animOut = { opacity: 1 };
1192 opts.cssBefore = { top: 0, left: 0 };
1193};
1194
1195// toss - move top slide and fade away
1196$.fn.cycle.transitions.toss = function($cont, $slides, opts) {
1197 var w = $cont.css('overflow','visible').width();
1198 var h = $cont.height();
1199 opts.before.push(function(curr, next, opts) {
1200 $.fn.cycle.commonReset(curr,next,opts,true,true,true);
1201 // provide default toss settings if animOut not provided
1202 if (!opts.animOut.left && !opts.animOut.top)
1203 opts.animOut = { left: w*2, top: -h/2, opacity: 0 };
1204 else
1205 opts.animOut.opacity = 0;
1206 });
1207 opts.cssBefore = { left: 0, top: 0 };
1208 opts.animIn = { left: 0 };
1209};
1210
1211// wipe - clip animation
1212$.fn.cycle.transitions.wipe = function($cont, $slides, opts) {
1213 var w = $cont.css('overflow','hidden').width();
1214 var h = $cont.height();
1215 opts.cssBefore = opts.cssBefore || {};
1216 var clip;
1217 if (opts.clip) {
1218 if (/l2r/.test(opts.clip))
1219 clip = 'rect(0px 0px '+h+'px 0px)';
1220 else if (/r2l/.test(opts.clip))
1221 clip = 'rect(0px '+w+'px '+h+'px '+w+'px)';
1222 else if (/t2b/.test(opts.clip))
1223 clip = 'rect(0px '+w+'px 0px 0px)';
1224 else if (/b2t/.test(opts.clip))
1225 clip = 'rect('+h+'px '+w+'px '+h+'px 0px)';
1226 else if (/zoom/.test(opts.clip)) {
1227 var top = parseInt(h/2);
1228 var left = parseInt(w/2);
1229 clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)';
1230 }
1231 }
1232
1233 opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';
1234
1235 var d = opts.cssBefore.clip.match(/(\d+)/g);
1236 var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]);
1237
1238 opts.before.push(function(curr, next, opts) {
1239 if (curr == next) return;
1240 var $curr = $(curr), $next = $(next);
1241 $.fn.cycle.commonReset(curr,next,opts,true,true,false);
1242 opts.cssAfter.display = 'block';
1243
1244 var step = 1, count = parseInt((opts.speedIn / 13)) - 1;
1245 (function f() {
1246 var tt = t ? t - parseInt(step * (t/count)) : 0;
1247 var ll = l ? l - parseInt(step * (l/count)) : 0;
1248 var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h;
1249 var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w;
1250 $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
1251 (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
1252 })();
1253 });
1254 opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
1255 opts.animIn = { left: 0 };
1256 opts.animOut = { left: 0 };
1257};
1258
1259})(jQuery);
</script>

<script type="text/javascript">
1
2 $(document).ready( function($) {
3
4
5
6 $('#slider').cycle({
7 fx: 'scrollVert',
8 speed: 1000,
9 pause: 1,
10 timeout: 7000,
11 delay: 500,
12 prev: '#slider_next',
13 next: '#slider_prev'
14 });
15 });
</script>
وهذا فى ورقة تصميم Css


الرمز:
#slider {
    height: 250px;
    overflow: hidden;
    width: 716px;
}
.slider {
    height: 250px;
    width: 716px !important;
}
.slider_content {
    display: block;
    height: 250px;
    margin: 0 auto;
    text-indent: -9999px;
    width: 716px;
}
#ipad .slider_content {
    background: url("http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png") no-repeat scroll left top transparent;
}
#iphone .slider_content {
    background: url("http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png") no-repeat scroll left top transparent;
}
#macbook .slider_content {
    background: url("http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png") no-repeat scroll left top transparent;
}
#slider_controls {
    height: 1px;
    margin: 0 auto;
    position: relative;
    width: 100px;
}
#slider_controls ul {
    background: url("http://www.tajreebw.---ممنوع الاشهار---/images/nav.png") no-repeat scroll center bottom transparent;
    display: block;
    height: 32px;
    left: -202px;
    position: absolute;
    text-indent: -9999px;
    top: -31px;
    width: 164px;
    z-index: 999;
}
#slider_controls li {
    float: left;
    height: 32px;
    width: 82px;
}
#slider_controls li a {
    display: block;
    height: 32px;
}
Cool

HiMa ElMaSrY
 
 

ذكر
عدد المساهمات : 17823
معدل النشاط : 19637

https://www.facebook.com/hima.and.hima

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في الخميس 25 أكتوبر 2012 - 20:54

والله ما ضبط ..
ابغى كود html مباشر ..

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف HAMSAHAQ في الخميس 25 أكتوبر 2012 - 21:01

اخي حدد نوع الكود و ثانيا نحن لسة لنا علاقة في منتدايات الفي بي

HAMSAHAQ
 
 

انثى
عدد المساهمات : 4871
معدل النشاط : 6557

http://alhoub.arab.st/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في الجمعة 26 أكتوبر 2012 - 8:06

ليس فى بى
http://a-galaxy.ace. st/forum
شوفوا هالموقع مركب كود سلايد شو زى الى بالمثال

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف 7ossam في الجمعة 26 أكتوبر 2012 - 13:07

تفضل اخى الكود الذى تريده
من هنا يا غالى
الرمز:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>


<style>
/* Global Reset */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; }

strong { font-weight:bold; }

em { font-style:italic; }

/* remember to define focus styles! */
:focus { outline:0; }
ol,ul { list-style:none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:separate;border-spacing:0; }
caption,th,td { text-align:left;font-weight:normal; }
blockquote:before,blockquote:after,
q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }


#slider {
   width: 716px;
   overflow: hidden;
   height: 250px;
}
.slider {
   height: 250px;
   width: 716px!important;
}
.slider_content {
   width: 716px;
   height: 250px;
   margin: 0 auto;
   display: block;
   text-indent: -9999px;
}

#ipad .slider_content {
   background: transparent url('http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png') no-repeat top left;
}

#iphone .slider_content {
   background: transparent url('http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png') no-repeat top left;
}


#macbook .slider_content {
   background: transparent url('http://www.tajreebw.---ممنوع الاشهار---/images/ipad.png') no-repeat top left;
}

#slider_controls {
   width: 100px;
   position: relative;
   margin: 0 auto;
   height: 1px;
}
#slider_controls ul {
   background: transparent url('http://www.tajreebw.---ممنوع الاشهار---/images/nav.png') no-repeat bottom center;
   display:block;
   height:32px;
   position:absolute;
   text-indent:-9999px;
   top:-31px;
   width:164px;
   z-index:9998;
   left:710:
;    left: -202px;
}
#slider_controls li {
   float: left;
   width: 82px;
   height: 32px;
}
#slider_controls li a {
   display: block;
   height: 32px;
}


</style>
 
<script type="text/javascript" src="[url=http://help.ahlamontada.com/view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js]http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js[/url]"></script>
<script type="text/javascript" src="[url=http://help.ahlamontada.com/view-source:http://www.tajreebw.eb2a.com/cycle.js]http://www.tajreebw.---ممنوع الاشهار---/cycle.js[/url]"></script>
<script type="text/javascript">
  $(document).ready( function($) {



    $('#slider').cycle({
      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'
    });
  });
</script>
 

</head>
 
<body class="home">

 
  <div id="slider">
    <!-- slider -->
    <div id="iphone" class="slider">
      <a href  class="slider_content"></a>
    </div>
    <!-- slider -->
    <div id="macbook" class="slider">
      <a href  class="slider_content"></a>
    </div>
    <!-- slider -->
    <div id="ipad" class="slider">
      <a href  class="slider_content"></a>
    </div>
  </div>
  <div id="slider_controls">
    <ul>
      <li><a href="[url=http://help.ahlamontada.com/view-source:http://www.tajreebw.---ممنوع الاشهار---/#]#[/url]" id="slider_prev"></a></li>
      <li><a href="[url=http://help.ahlamontada.com/view-source:http://www.tajreebw.---ممنوع الاشهار---/#]#[/url]" id="slider_next"></a></li>
    </ul>
</div>
 
 
 
</body>
</html>
نفس اللى موجود فى الموقع

7ossam
 
 

ذكر
عدد المساهمات : 1772
معدل النشاط : 4307

http://www.ourislam1.com/forum.htm

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في السبت 27 أكتوبر 2012 - 10:50

والله ما ضبط

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود html مثل السلادر شو .. يوجد مثال

مُساهمة من طرف المارد العبقرى في الإثنين 29 أكتوبر 2012 - 13:40

فينكم ؟

المارد العبقرى
 
 

ذكر
عدد المساهمات : 380
معدل النشاط : 3219

http://i29.servimg.com/u/f29/11/14/55/92/eg10.png

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى