![[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsKajTZpsRWSwijDNPzZWU4y0frb-IeMOo9hyoe0vwzDj0lQabogU-NRKEgoLOLgK_oWpbbZRQ7PldV0kBGlWm_E0UdvJhSwujBra9u_TIFyhs8b8fgeaRXhuU5kfvTadX9jY4_6jGTOV/s72-c/Untitled-232.png)
 |
| سلايد شو carousel |
بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته.
سلايد شو أحترافي على شكل carousel لموقعك
سلايد شو carousel , السلايد شو مناسب لمواقع الكتب , او تحميل الكتب , الانمي , البرامج , الالعاب , مواقع تعليميه , حيث انه سلايد شو يقوم بعرض الصور على شكل مربعات متقطعه , بمعنى انه يقوم بعرض الصور على شكل مجموعات ثم عند الضغط يتم جلب المجموعة التي تليها .مثال مباشر : هنا .
صورة :
 |
| سلايد شو carousel |
طريقة التركيب :
الخطوة الاولى :
- ادخل مدونتك.
- القالب.
- حرر القالب وابحث عن <head>
- الصق هذا الكود اسفله :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>اذا كان قالبك يحتوي على مكتبة الجيكوري فعلاَ فلا تضيفه.
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>
الخطوة الثانية :
- ابحث عن ]]></b:skin>
- والصق هذا الكود فوقه او قبله :
#caja-carrusel{width:920px;height:155px;overflow:hidden;margin:20px auto;padding:0;position:relative;top:0;z-index:5;}.infiniteCarousel{width:900px;position:relative;height:170px;margin:0 0 0 10px;}.infiniteCarousel .wrapper{width:845px;overflow:auto;height:170px;margin:0 25px 0 25px;position:absolute;top:0;}.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}.infiniteCarousel ul li{display:block;float:left;padding:9px;height:142px;width:102px;}.infiniteCarousel ul li a img{display:block;color:#000;}.infiniteCarousel .icon-angle-right{right:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}.infiniteCarousel .icon-angle-left{left:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}
الخطوة الثالثة :
- ابحث عن </body>
- الصق الكود فوقه او قبله :
<script type='text/javascript'> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); } return this.each(function () { var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> li'), $single = $items.filter(':first'), singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible); if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); $wrapper.scrollLeft(singleWidth * visible); function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } currentPage = page; }); return false; } $wrapper.after('<a class="icon-angle-left"></a><a class="icon-angle-right"></a>'); $('a.icon-angle-left', this).click(function () { return gotoPage(currentPage - 1); }); $('a.icon-angle-right', this).click(function () { return gotoPage(currentPage + 1); }); $(this).bind('goto', function (event, page) { gotoPage(page); }); }); }; $(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); }); </script>
الخطوة الرابعة :
- الان اذهب الى التخطيط .
- اختر مكان مناسب مثلا تحت الهيدر او فوق المشاركات .
- ثم اختر اداة html/javascript.
- الصق هذا الكود فيها مع تعديل ماسأذكر :
<div id='caja-carrusel'>
<div class='infiniteCarousel'>
<div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '>
<ul>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/0.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/1.Jpeg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/2.jpeg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/3.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/4.Jpeg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/6.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/8.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/9.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/10.png' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/11.Jpeg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/12.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li>
<li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li>
</ul></div> </div></div>
: رابط الصورة.
: وصف الصورة , غير مهم.
: عنوان الموضوع.
اتمنى عند النقل ذكر المصدر ومتابعة جديد المدونة .
عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.
معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة :سلايد شو أحترافي على شكل carousel لموقعك
ملخص التدوينة:
سلايد شو carousel بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم السلام عليكم ورحم...
تاق :
ردحذفالسكربت الخطوة الثالثة لايتلائم مع بلوجر كذا يجيني؟؟
حدث خطأ أثناء تحليل XML، في السطر 1502، العمود 940: The content of elements must consist of well-formed character data or markup.
:( سويت الخطوات وللآن مازيطت:(
ردحذفشكرا على التنبيه , تم تعديلها ت5
حذفاخي عرف ماهي مشكلة السلايدر سويت الخطوات لان الصورلاتضهر ابدا مالحل؟؟؟
ردحذفحاولت كذا مرة وسويت نفس خطواتك :((
تفضل دمجت لك كامل الاكواد :
حذفافتح التخطيط , ثم اداة html/javascript وافضل تضعها تحت الهيدر مباشره , والصق بها الاكواد التي في المفكرة :
http://www.gulfup.com/?cP5P8q
ردحذفبعد ماركبته شوف كيف طلع الصور لاتظهر :(
http://im71.gulfup.com/G0d6wt.png
والله شيء غريب يا اخي , الاكواد كاملة وكل شيء كامل , يمكن تكون المشكلة في طريقة التركيب من عندك ج3 .
حذفجرب هذا السلايد شو : <a href='http://blog.7lolblogger.com/2013/10/Exclusive-Slideshow-3asq-Forum-for-Blog-blogger-2014.html'>سلايد شو منتدى العاشق لمدونة بلوجر </a>
امتياز الله ينور تم التجربه والاستفاده
ردحذفجزاكم الله خيرا
سلايد شو مذهل , نجحت معاي وتم تركيبها ت3
ردحذف