| ط³ظ„ط§ظٹط¯ ط´ظˆ ط¬ظ…ظٹظ„ | Slide show Html5 , Css3, jQuery


السلام عليكم و رحمة الله تعالى و بركاته
بسم الله الرحمان الحريم و الصلاة و السلام على أشرف المرسلين
سيدنا و حبيبنا محمد صلى الله عليه و سلم أما بعد
فأهلا بكم يا أهل ملتقى المبرمجين العرب ، بعد تلقينا لعدة طلبات
تطلب سلايد شو ، ها قد جئنا لكم بسلايد شو جميل و رائع
بالنسبة للاخوة الذين لا يعلمون ما معنى السلايد شو انه معرض صور صغير
تعرض فيه الصور بالتتالي اوتوماتيكيا
ساقوم بشرح طريقة كيفية تركيب installه على نسخة معينة و ساضع رابط التحميل ايضا اما تحملونه من الملفقات او من زر Download التالي مرفوع على ملتقى المبرمجين العرب



و لتركبيه على نسخة فعلك تحميل من Donwload ثم فك الضغط ستجد مجلدان Images & Js
ضعهما على رابط نسختك حيث يكون رابطهما :
www.sitename.com/js و www.sitename.com/images
ثم تتوجه الى ملف Header الذي يفترض ان مساره سيكون : www.sitename.com/header.php
افتحه بالمحرر ثم اذهب الى وسم <head> ضعه فيه الكود code الثالي

رمز PHP:
<code style="white-space:nowrap"> <code> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h2{
color: red;
}
pre{
padding: 4px;
border: #F90 dotted 1px;
}



</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/webwidget_slideshow_html5_simple.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#slideshow").webwidget_slideshow_html5_simple ({
slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_verti cal_blind,Wipe_from_vertical_center,Wipe_from_hori zontal_center,Wipe_to_horizontal_center,Wipe_to_ve rtical_center,Wipe_from_bottom_to_top,Wipe_from_to p_to_bottom,Wipe_from_right_to_left',
slideshow_time_interval: '4000',
slideshow_window_width: '500',
slideshow_window_height: '300',
slideshow_background_color: '#FFF',
slideshow_border: '#999 solid 2px',
text_effect: 'text_fade'
});
});
</script>
</head>
</code> </code>

بعدها اتجه الى المكان الذي تود وضع فيه السلايد شو وضع الكود code التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="slideshow">
<ul>
<li>
<a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
</li>
<li>
<img src="images/slideshow_large_2.jpg" alt="Sea" />
</li>
<li>
<a href="#" ><img src="images/slideshow_large_3.jpg" alt="Flower" /></a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_4.jpg" alt="Tree" /></a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_2.jpg" alt="Sea" />
</a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_3.jpg" alt="Flower" /></a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_4.jpg" alt="Tree" /></a>
</li><li>
<a href="#" ><img src="images/slideshow_large_1.jpg" alt="Sky" /></a>
</li>
<li>
<a href="#" ><img src="images/slideshow_large_2.jpg" alt="Sea" />
</a>
</li>
</ul>
</div>
</code> </code>

مع التتعديل على الروابط ...
و السلام عليكم و رحمة الله تعالى و بركاته
اي استفسار انا موجود






الملفات المرفقة [TR]
Slideshow.zip (225.1 كيلوبايت, عدد مرات المشاهدة 175 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©