منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.


انشاء منتدى مجاني شبيه بهذا المنتدى

طلب سلايد بسيط*

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

طلب سلايد بسيط*

مُساهمة من طرف meme.99 في الأحد 25 سبتمبر 2016 - 21:52

السلام عليكم ورحمة الله وبركاته


مساء الخير إخواني واخواتي في الله Cool

مثل الذي هنا تماما:





**ويكون قابل للتعديل




في انتظار المبدعين ♥ Cool
avatar
meme.99
 
 

انثى
عدد المساهمات : 167
معدل النشاط : 2333
السُمعة : 0

http://korea.wow3.info

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

رد: طلب سلايد بسيط*

مُساهمة من طرف Ahd allah في الأحد 25 سبتمبر 2016 - 22:19

تفضلي
الكود:

<br />        <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/css.css" media="all" />          <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/1.css" media="all" />        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.min.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.easing.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.carouFredSel-5.5.0.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.tipsy.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/styleswitch.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.js"></script>        <script type="text/javascript">
        $(document).ready(function() {
        $('#foo1').carouFredSel({
                      auto: {pauseDuration: 5000, delay: 375},
                      prev: '#foo1_prev',
                      next: '#foo1_next',
                      pagination: "#foo1_pag",

                    });
        $('#foo2').carouFredSel({
                      auto: {pauseDuration: 5000, delay: 375},
                      prev: '#foo2_prev',
                      next: '#foo2_next',
                      pagination: "#foo2_pag",

                    });
       

        });
        </script>       
<div style="width: 903px;margin: 0px auto;height: 195px;overflow: hidden;">
            
   <div class="image_carousel">
                             
      <div id="foo1">
                            
         <!--        المجموعة الأولى        --> <a href="رابط الموضوع/"> <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط  الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع" /></a>        <a href="رابط             
         <!--      نهاية المجموعة الأولى      -->               
      </div>
                         
      <div class=" clearfix"="">        </a>
      </div><a href="رابط                       
         <!--      نهاية المجموعة الأولى      -->               
      </div>
                         
      <div class=" clearfix"="">                </a><a class="prev" id="foo1_prev" href="#"><span>prev</span></a>            <a class="next" id="foo1_next" href="#"><span>next</span></a>                 
      <div class="pagination" id="foo1_pag">
                  
      </div>
                         
   </div>
</div>
<div class="br-cl">
</div>


avatar
Ahd allah
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 2097
معدل النشاط : 4006
السُمعة : 158

http://madany.moontada.net

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

عفوا ماهذا ؟؟

مُساهمة من طرف meme.99 في الأحد 25 سبتمبر 2016 - 23:11

@ahd allah كتب:
تفضلي
الكود:

<br />        <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/css.css" media="all" />          <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/1.css" media="all" />         <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.min.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.easing.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.carouFredSel-5.5.0.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.tipsy.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/styleswitch.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.js"></script>        <script type="text/javascript">
        $(document).ready(function() {
        $('#foo1').carouFredSel({
                       auto: {pauseDuration: 5000, delay: 375},
                       prev: '#foo1_prev',
                       next: '#foo1_next',
                       pagination: "#foo1_pag",

                    });
        $('#foo2').carouFredSel({
                       auto: {pauseDuration: 5000, delay: 375},
                       prev: '#foo2_prev',
                       next: '#foo2_next',
                       pagination: "#foo2_pag",

                    });
        

        });
        </script>        
<div style="width: 903px;margin: 0px auto;height: 195px;overflow: hidden;">
          
 <div class="image_carousel">
                        
 <div id="foo1">
                    
 <!--        المجموعة الأولى        --> <a href="رابط الموضوع/"> <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>         <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط   الموضوع/">        <img style="width: 150px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع" /></a>        <a href="رابط              
 <!--      نهاية المجموعة الأولى      -->                
 </div>
                    
 <div class=" clearfix"="">         </a>
 </div><a href="رابط                        
 <!--      نهاية المجموعة الأولى      -->                
 </div>
                    
 <div class=" clearfix"="">                 </a><a class="prev" id="foo1_prev" href="#"><span>prev</span></a>            <a class="next" id="foo1_next" href="#"><span>next</span></a>                  
 <div class="pagination" id="foo1_pag">
          
 </div>
                    
 </div>
</div>
<div class="br-cl">
</div>




عفوا عزيزي .. لكن ماهذا ؟؟!

ليس هذا ما أريده ..
طلبي واضح وكما قلت:


مثل الذي هنا تماما:

( http://saworlded.esy.es/matger )




**ويكون قابل للتعديل


----------------


عموما شكرا لمحاولتك Cool


في انتظار الأخرين Cool
avatar
meme.99
 
 

انثى
عدد المساهمات : 167
معدل النشاط : 2333
السُمعة : 0

http://korea.wow3.info

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

رد: طلب سلايد بسيط*

مُساهمة من طرف Ahd allah في الأحد 25 سبتمبر 2016 - 23:51

والله يا عزيزتي : ان الخطأ هنا ليس خطؤنا
بل خطؤك انت
لان المنتدي الذي وضعتي رابطه به اثنان سلايد شو
وانت لم تحددي لنا ايا منهما تريدين بالضبط
فاحضرنا لك احدهما وهو البسيط كما ذكرتي في عنوان موضوعك.
وبناءا عليه فان طلبك غير واضح بالمرة .
avatar
Ahd allah
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 2097
معدل النشاط : 4006
السُمعة : 158

http://madany.moontada.net

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

رد: طلب سلايد بسيط*

مُساهمة من طرف meme.99 في الإثنين 26 سبتمبر 2016 - 7:33

@ahd allah كتب:
والله يا عزيزتي : ان الخطأ هنا ليس خطؤنا
بل خطؤك انت
لان المنتدي الذي وضعتي رابطه به اثنان سلايد شو


( لان المنتدي الذي وضعتي رابطه به اثنان سلايد شو )

^كييف اثنان سلايد شو ؟! Shocked


لا لا معليش مش اثنين .. الموقع به سلايد واحد اسفل اللوجو
سلايد واضح وكبير ممتدد بعرض الشاشة تقريبا وهو صورة واحدة تتغير وليست مجموعة صور


ارجو التأكد من ذلك




في انتظار المبدعين Cool
avatar
meme.99
 
 

انثى
عدد المساهمات : 167
معدل النشاط : 2333
السُمعة : 0

http://korea.wow3.info

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

رد: طلب سلايد بسيط*

مُساهمة من طرف meme.99 في الثلاثاء 27 سبتمبر 2016 - 5:51

أين أنتم ي مبدعين :$






أسعد الله اوقاتكم بكل خير ♥
avatar
meme.99
 
 

انثى
عدد المساهمات : 167
معدل النشاط : 2333
السُمعة : 0

http://korea.wow3.info

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

رد: طلب سلايد بسيط*

مُساهمة من طرف Ahd allah في الثلاثاء 27 سبتمبر 2016 - 10:21

شوفي ده
مع ملاحظة ان ان السلايد الذي تقصديه لا يظهر عندي صورته اطلاقا
وتم تصميم هذا بناءا علي المواصفات التي ذكرتيها فقط
مع مراعات تكرار رابط الصورة في الثلاثة حقول
ويمكن التحكم في العرض والارتفاع .
الكود:

    <br />        <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/css.css" media="all" />          <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/1.css" media="all" />        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.min.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.easing.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.carouFredSel-5.5.0.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.tipsy.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/styleswitch.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.js"></script>        <script type="text/javascript">
            $(document).ready(function() {
            $('#foo1').carouFredSel({
                          auto: {pauseDuration: 5000, delay: 375},
                          prev: '#foo1_prev',
                          next: '#foo1_next',
                          pagination: "#foo1_pag",

                        });
            $('#foo2').carouFredSel({
                          auto: {pauseDuration: 5000, delay: 375},
                          prev: '#foo2_prev',
                          next: '#foo2_next',
                          pagination: "#foo2_pag",

                        });
          

            });
            </script>      
    <div style="width: 903px;margin: 0px auto;height: 195px;overflow: hidden;">
                
       <div class="image_carousel">
                                
          <div id="foo1">
                                
             <!--        المجموعة الأولى        --> <a href="رابط الموضوع/"> <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط الموضوع/">        <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">            
             <!--      نهاية المجموعة الأولى      -->              
          </div>
                            
          <div class=" clearfix"="">        </a>
          </div><a href="رابط                      
             <!--      نهاية المجموعة الأولى      -->              
          </div>
                            
          <div class=" clearfix"="">                </a><a class="prev" id="foo1_prev" href="#"><span>prev</span></a>            <a class="next" id="foo1_next" href="#"><span>next</span></a>                
          <div class="pagination" id="foo1_pag">
                      
          </div>
                            
       </div>
    </div>
    <div class="br-cl">
    </div>



وعموما اذا لم يكن هذا هو المطلوب فانتظري السادة الخبراء .
avatar
Ahd allah
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 2097
معدل النشاط : 4006
السُمعة : 158

http://madany.moontada.net

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

رد: طلب سلايد بسيط*

مُساهمة من طرف meme.99 في الثلاثاء 27 سبتمبر 2016 - 15:50

@ahd allah كتب:
شوفي ده
مع ملاحظة ان ان السلايد الذي تقصديه لا يظهر عندي صورته اطلاقا
وتم تصميم هذا بناءا علي المواصفات التي ذكرتيها فقط
مع مراعات تكرار رابط الصورة في الثلاثة حقول
ويمكن التحكم في العرض والارتفاع .
الكود:

    <br />        <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/css.css" media="all" />          <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/css/1.css" media="all" />        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.min.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.easing.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.carouFredSel-5.5.0.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.tipsy.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/styleswitch.js"></script>        <script src="https://dl.dropboxusercontent.com/u/64727436/H/jq/sh1/js/jquery.js"></script>        <script type="text/javascript">
            $(document).ready(function() {
            $('#foo1').carouFredSel({
                          auto: {pauseDuration: 5000, delay: 375},
                          prev: '#foo1_prev',
                          next: '#foo1_next',
                          pagination: "#foo1_pag",

                        });
            $('#foo2').carouFredSel({
                          auto: {pauseDuration: 5000, delay: 375},
                          prev: '#foo2_prev',
                          next: '#foo2_next',
                          pagination: "#foo2_pag",

                        });
          

            });
            </script>      
    <div style="width: 903px;margin: 0px auto;height: 195px;overflow: hidden;">
                
       <div class="image_carousel">
                                
          <div id="foo1">
                                
             <!--        المجموعة الأولى        --> <a href="رابط الموضوع/"> <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">        <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt="اسم الموضوع" /></a>        <a href="رابط الموضوع/">        <img style="width: 850px; height: 150px;" src="http://oi64.tinypic.com/w89vuq.jpg" alt=" اسم الموضوع " /></a>        <a href="رابط الموضوع/">            
             <!--      نهاية المجموعة الأولى      -->              
          </div>
                            
          <div class=" clearfix"="">        </a>
          </div><a href="رابط                      
             <!--      نهاية المجموعة الأولى      -->              
          </div>
                            
          <div class=" clearfix"="">                </a><a class="prev" id="foo1_prev" href="#"><span>prev</span></a>            <a class="next" id="foo1_next" href="#"><span>next</span></a>                
          <div class="pagination" id="foo1_pag">
                      
          </div>
                            
       </div>
    </div>
    <div class="br-cl">
    </div>



وعموما اذا لم يكن هذا هو المطلوب فانتظري السادة الخبراء .



شكرا ولكن ليس هذا ما اريده ::دخت:


اريد السلايد الكبير الذي يظهر هنا في هذا الموقع
( http://saworlded.esy.es/matger )
avatar
meme.99
 
 

انثى
عدد المساهمات : 167
معدل النشاط : 2333
السُمعة : 0

http://korea.wow3.info

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

رد: طلب سلايد بسيط*

مُساهمة من طرف 0marp0p23 في الأربعاء 28 سبتمبر 2016 - 0:45

جرب هذا الكود يوضع في التشكيلات العامة
الكود:
<meta content="width=device-width, initial-scale=1" name="viewport" /> <style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
<div class="slideshow-container">
  
 <div class="mySlides fade">
      
 <div class="numbertext">
  1 / 3  
 </div>
    <img style="width:100%" src="http://www.w3schools.com/howto/img_nature_wide.jpg" />    
 <div class="text">
  Caption Text  
 </div>
  
 </div>
  
 <div class="mySlides fade">
      
 <div class="numbertext">
  2 / 3  
 </div>
    <img style="width:100%" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" />    
 <div class="text">
  Caption Two  
 </div>
  
 </div>
  
 <div class="mySlides fade">
      
 <div class="numbertext">
  3 / 3  
 </div>
    <img style="width:100%" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" />    
 <div class="text">
  Caption Three  
 </div>
  
 </div>
   <a onclick="plusSlides(-1)" class="prev">❮</a><a onclick="plusSlides(1)" class="next">❯</a>
</div><br />
<div style="text-align:center">
    <span onclick="currentSlide(1)" class="dot"></span>  <span onclick="currentSlide(2)" class="dot"></span>  <span onclick="currentSlide(3)" class="dot"></span>
</div>
 <script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 5000); // Change image every 5 seconds
}
</script>

لمزيد من التفاصيل يمكنك زيارة
http://www.w3schools.com/howto/howto_js_slideshow.asp
avatar
0marp0p23
 
 

ذكر
عدد المساهمات : 748
معدل النشاط : 2566
السُمعة : 71

http://cocss.arab.st

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


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