إنشاء شريط منزلقة Slidebar مع الصور على واجهة منتدالك

اذهب الى الأسفل

إنشاء شريط منزلقة Slidebar مع الصور على واجهة منتدالك  Empty إنشاء شريط منزلقة Slidebar مع الصور على واجهة منتدالك

مُساهمة من طرف أحمد مناع في الأربعاء نوفمبر 14, 2018 7:20 pm

يمكنك إضافة شريط الشريحة المستخدم عادة كعرض توضيحي للصورة ، كما يمكن استخدامه كإعلان في منتداك.

إنشاء شريط منزلقة Slidebar مع الصور على واجهة منتدالك  3da4d369057a40528a06891e572c25cc

التركيب :


لوحة التحكم >> مظهر المنتدى >> الصفحة الرئيسية >> تشكيلات عامة >> وضع اعلان فى الضفحة الرئسية .....انسخ الكود التالى و ضعه فى محرر html


الكود:
    <link href="http://jquerytools.github.io/media/css/scrollable-horizontal.css" type="text/css" rel="stylesheet" /><link href="http://jquerytools.github.io/media/css/scrollable-buttons.css" type="text/css" rel="stylesheet" /><script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<!--  HTML structures  -->
<div style="margin:0 auto; width: 634px; height:120px;">
   <!--  "previous page" action  --><a class="prev browse left"></a>
   <!--  root element for scrollable  -->
   <div id="scrollable" class="scrollable">
        
      <!--  root element for the items  -->  
      <div class="items">
            
         <!--  grupo 1  -->    
         <div>
                  <a href="LINK_1"><img title="TITULO_1" src="IMAGEM_1" /></a>        <a href="LINK_2"><img title="TITULO_2" src="IMAGEM_2" /></a>    <a href="LINK_3"><img title="TITULO_3" src="IMAGEM_3" /></a>         <a href="LINK_4"><img title="TITULO_4" src="IMAGEM_4" /></a>    
         </div>
         <!-- Fim do grupo 1 -->    
         <!--  grupo 2  -->    
         <div>
                       <a href="LINK_5"><img title="TITULO_5" src="IMAGEM_5" /></a>        <a href="LINK_6"><img title="TITULO_6" src="IMAGEM_6" /></a>   <a href="LINK_7"><img title="TITULO_7" src="IMAGEM_7" /></a>         <a href="LINK_8"><img title="TITULO_8" src="IMAGEM_8" /></a>    
         </div>
         <!--   fim do grupo 2  -->    
         <!--  grupo 3  -->    
         <div>
                        <a href="LINK_9"><img title="TITULO_9" src="IMAGEM_9" /></a>        <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>   <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>         <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>    
         </div>
         <!--  fim do grupo 3  -->  
         <!--  Adicione aqui mais códigos -->  
      </div>
      
   </div>
  
   <!--  "next page" action  --><a class="next browse right"></a>
</div>
<!--  javascript coding  --><script>
jQuery(function() {
  // initialize scrollable
  jQuery(".scrollable").scrollable();
});
</script>

حيث أن :
:  IMAGE الصورة التى ستظهر فى القائمة استبدل بعنوان url الخاص بالصورة التي تريد ظهورها. جميع الصيغ المدعومة.

:  LINK هو الرابط الذى سيوجهك الى الصفحة او الموضوع عند النقر على الصورة.

:  TITLE العنوان الذي سيظهر عندما تقف بالماوس فوق الصورة.

كيف يمكنني إضافة مجموعة أخرى من الشرائح؟  

فقط ابحث عن الرمز:
الكود:
<!-- Adicione aqui mais códigos-->

واستبدالها

الكود:
<!-- grupo Nº -->
<div>
<a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
<a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
<a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
<a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
</div>
<!--Fim do grupo Nº-->

Very Happy

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم
أحمد مناع
أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 980
النقاط : 201761
التقيم : 117
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى