admin
11-01-2013, بتوقيت غرينيتش 04:24 PM
http://www.dzbatna.com/images/icons/iconrote.gif | ط³ظ„ط§ظٹط¯ ط´ظˆ ط¬ظ…ظٹظ„ | Slide show Html5 , Css3, jQuery (http://www.dzbatna.com/t2115965/)
السلام عليكم و رحمة الله تعالى و بركاته
بسم الله الرحمان الحريم و الصلاة و السلام على أشرف المرسلين
سيدنا و حبيبنا محمد صلى الله عليه و سلم أما بعد
فأهلا بكم يا أهل ملتقى المبرمجين العرب ، بعد تلقينا لعدة طلبات
تطلب سلايد شو ، ها قد جئنا لكم بسلايد شو جميل و رائع
بالنسبة للاخوة الذين لا يعلمون ما معنى السلايد شو انه معرض صور صغير
تعرض فيه الصور بالتتالي اوتوماتيكيا
ساقوم بشرح طريقة كيفية تركيب installه على نسخة معينة و ساضع رابط التحميل ايضا اما تحملونه من الملفقات او من زر Download التالي مرفوع على ملتقى المبرمجين العرب (http://www.dev-arb.com)
http://www.dev-arb.com/uploads/Files/dev-arb.com1341172380.PNG (http://www.dev-arb.com/demos/Slideshow/index.php) http://www.dev-arb.com/uploads/Files/dev-arb.com1341172395.PNG (http://www.dev-arb.com/uploads/Files/dev-arb.com1341337301.ZIP)
و لتركبيه على نسخة فعلك تحميل من Donwload ثم فك الضغط ستجد مجلدان Images & Js
ضعهما على رابط نسختك حيث يكون رابطهما :
www.sitename.com/js (http://www.sitename.com/js) و www.sitename.com/images (http://www.sitename.com/images)
ثم تتوجه الى ملف Header الذي يفترض ان مساره سيكون : www.sitename.com/header.php (http://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>
مع التتعديل على الروابط ...
و السلام عليكم و رحمة الله تعالى و بركاته
اي استفسار انا موجود
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Slideshow.zip (http://www.traidnt.net/vb/attachments/650157d1341341831-slideshow.zip) (225.1 كيلوبايت, عدد مرات المشاهدة 175 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله تعالى و بركاته
بسم الله الرحمان الحريم و الصلاة و السلام على أشرف المرسلين
سيدنا و حبيبنا محمد صلى الله عليه و سلم أما بعد
فأهلا بكم يا أهل ملتقى المبرمجين العرب ، بعد تلقينا لعدة طلبات
تطلب سلايد شو ، ها قد جئنا لكم بسلايد شو جميل و رائع
بالنسبة للاخوة الذين لا يعلمون ما معنى السلايد شو انه معرض صور صغير
تعرض فيه الصور بالتتالي اوتوماتيكيا
ساقوم بشرح طريقة كيفية تركيب installه على نسخة معينة و ساضع رابط التحميل ايضا اما تحملونه من الملفقات او من زر Download التالي مرفوع على ملتقى المبرمجين العرب (http://www.dev-arb.com)
http://www.dev-arb.com/uploads/Files/dev-arb.com1341172380.PNG (http://www.dev-arb.com/demos/Slideshow/index.php) http://www.dev-arb.com/uploads/Files/dev-arb.com1341172395.PNG (http://www.dev-arb.com/uploads/Files/dev-arb.com1341337301.ZIP)
و لتركبيه على نسخة فعلك تحميل من Donwload ثم فك الضغط ستجد مجلدان Images & Js
ضعهما على رابط نسختك حيث يكون رابطهما :
www.sitename.com/js (http://www.sitename.com/js) و www.sitename.com/images (http://www.sitename.com/images)
ثم تتوجه الى ملف Header الذي يفترض ان مساره سيكون : www.sitename.com/header.php (http://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>
مع التتعديل على الروابط ...
و السلام عليكم و رحمة الله تعالى و بركاته
اي استفسار انا موجود
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Slideshow.zip (http://www.traidnt.net/vb/attachments/650157d1341341831-slideshow.zip) (225.1 كيلوبايت, عدد مرات المشاهدة 175 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
