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

3 مشترك

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

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

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

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


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

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





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




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

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

http://korea.wow3.info

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

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

مُساهمة من طرف 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>


Ahd allah
Ahd allah
 
 

ذكر
عدد المساهمات : 1635
معدل النشاط : 7567
السُمعة : 209

https://madany.ahlamontada.com/

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

طلب سلايد بسيط* Empty عفوا ماهذا ؟؟

مُساهمة من طرف 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
meme.99
meme.99
 
 

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

http://korea.wow3.info

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

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

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

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

ذكر
عدد المساهمات : 1635
معدل النشاط : 7567
السُمعة : 209

https://madany.ahlamontada.com/

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

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

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

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


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

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


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


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




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

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

http://korea.wow3.info

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

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

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

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






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

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

http://korea.wow3.info

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

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

مُساهمة من طرف 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>



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

ذكر
عدد المساهمات : 1635
معدل النشاط : 7567
السُمعة : 209

https://madany.ahlamontada.com/

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

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

مُساهمة من طرف 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 )
meme.99
meme.99
 
 

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

http://korea.wow3.info

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

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

مُساهمة من طرف omarpop23 الأربعاء 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
omarpop23
omarpop23
 
 

ذكر
عدد المساهمات : 1522
معدل النشاط : 6521
السُمعة : 218

http://www.best-devs.net

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

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

- مواضيع مماثلة

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