سلايد شو احترافي على شكل 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>

  : رابط الموضوع الذي عند الضغط على الصورة سيتم الذهاب اليه .
  : رابط الصورة.
  : وصف الصورة , غير مهم.
  : عنوان الموضوع.

ليست هناك تعليقات:

إرسال تعليق

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي.

الأحد، 6 مارس 2016