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

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 )




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


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


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


في انتظار الأخرين

ahd allah كتب:

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

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

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


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


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




في انتظار المبدعين

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 )

الكود:

<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>