سلايد شو (9)

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 9

للمعاينة ( سلايدر الصور) : اضـــغط هنا
للمعاينة ( سلايدر الفيديو) : اضـــغط هنا

صورة للسلايدر ( سلايدر الصور)

صورة للسلايدر ( سلايدر الفيديو)

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://showcase.awkwardgroup.com/jquery.aw-showcase.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 700,
content_height: 470,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 2, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
custom_function: null /* Define a custom function that runs on content change */
});
});

</script>

خطوة 3 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير ( سلايدر الفيديو)
:

او يمكنك اختيار ( سلايدر الفيديو) اختر واحد فقط اما الكود في الاسفل او الكود في الاعلى اقصد على الخطوة 3 :
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<iframe src="http://player.vimeo.com/video/1185346?title=0&byline=0&portrait=0" width="700" height="470" frameborder="0"></iframe>
</div>
</div>

غير اللون الاصفر برابط الصورة ولكن في سلايدر الفيديو غيره برابط الفيديو واللون الوردي هو النص

سلايد شو (9)

Unknown