caroisel with dynamic item

0 امتیاز
76 بازدید
سوال شده اردیبهشت 20, 1395 توسط poyarayaneh  
با سلام و خسته نباشید

من می خوام  بوسیله

carousel

عکس هایی را از دیتابیس بخونم. ویدئوی آقای ابراهیمی را نگاه کردم عکس های استاتیک را انجام داده بود. متاسفانه هر کاری کردم نشد داینامیک انجام بدم. اگه ممکنه برای این موضوع مرا راهنمایی نمایید.

با سپاس
این مطلب را به اشتراک بگذارید
دارای دیدگاه اردیبهشت 22, 1395 توسط mr2016  
سلام

قسمتی که مربوط به عکس میشه رو داخل حلقه foreach قرار بدید

و تو src عکس ادرس فایل رو اسم عکس رو قرار بدید

کد رو اینجا بنویسید تا ویرایش بشه

1 پاسخ

0 امتیاز
پاسخ داده شده اردیبهشت 25, 1395 توسط poyarayaneh  
سلام ضمن تشکر از شما

کد زیر را نوشتم ولی جواب نمیده

<?php
//include "func.php";
//connect();

$sql="SELECT * FROM picture";
                    $result=mysql_query($sql);
                    $slides='';
$Indicators='';
$counter=0;
 
    while($row=mysql_fetch_array($result))
    {
         $image = $row['src'];
       if($counter == 0)
        {
            $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'" class="active"></li>';
            $slides .= '<div class="item active">
            <img src="images/'.$image.'"/>
            <div class="carousel-caption">
              '.$image.'
            </div>
          </div>';
 
        }
        else
        {
            $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
            $slides .= '<div class="item">
            <img src="images/'.$image.'"  />
            <div class="carousel-caption">
                 '.$image.'  
            </div>
          </div>';
        }
        $counter++;
    }
 
?>
<a href="#carouselslide" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselslide" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

</body>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval:3000,
wrap:false

});
</script></html>
دارای دیدگاه اردیبهشت 25, 1395 توسط mr2016  
توی کد هاتون چرا از

echo

استفاده نکردین ؟
مثال

echo "<li>$result->image</li>";
در ضمن داخل " " باید قرار بدید

تست کنید باز خبر بدید
دارای دیدگاه اردیبهشت 26, 1395 توسط poyarayaneh  
سلام

متاسفانه متوجه نشدم دقیقا کجا رافرمودید اگه ممکنه روی کد فوق محل اشکل را دقیقا مشخص نمایید.

با سپاس
دارای دیدگاه اردیبهشت 26, 1395 توسط mr2016  
شما اینو جایگزین کن ببین حواب میده ؟

البته فقط قسمت if ول رو درست کردم کد هاش رو بع else دست نزدم

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<?php
//include "func.php";
//connect();

$sql="SELECT * FROM picture";
                    $result=mysql_query($sql);
                    $slides='';
$Indicators='';
$counter=0;
 
    while($row=mysql_fetch_array($result))
    {
         $image = $row['src'];
       if($counter == 0)
        {
            echo "<li data-target='#carousel-example-generic' data-slide-to='".$counter."' class='active'></li>
            <div class='item active'>
            <img src='images/".$image."'/>
            <div class='carousel-caption'>
              ".$image."
            </div>
          </div>";
 
        }
        else
        {
            $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
            $slides .= '<div class="item">
            <img src="images/'.$image.'"  />
            <div class="carousel-caption">
                 '.$image.'  
            </div>
          </div>';
        }
        $counter++;
    }
 
?>
<a href="#carouselslide" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselslide" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

 

            <script type="text/javascript">
    $('.carousel').carousel({
        interval:3000,
        wrap:false

        });
</script>
</body>
</html>
دارای دیدگاه اردیبهشت 27, 1395 توسط poyarayaneh  
سلام مجدد

با تغییراتی که در کدها ایجاد کردم الان تصاویر را نشان میده ولی نمایش آن بصورت

اسلایدر نمی باشد.

 

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
 <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

            <script type="text/javascript">
    $('.carousel').carousel({
        interval:3000,
        wrap:false

        });
</script>

   </head>
<body>

<?php
 include "func.php";
 connect();
 
        $sql="SELECT * FROM picture";
        $result=mysql_query($sql);
        $counter=0;
        while($row=mysql_fetch_array($result))
            {
             $image = $row['src'];
             if($counter==0)
             {
                    echo "<ol><li data-target='#carousel-example-generic' data-slide-to='".$counter."' class='active'></li></ol>
            <div class='item active'>
            <img src='images/".$image."'/>
            <div class='carousel-caption'>
              ".$image."
            </div>
          </div>";
         
             }
             else{
             echo "<ol class='carousel-indicators'>
                 <li data-target='#carousel-example-generic' data-slide-to='".$counter."' class='active'></li></ol>
             <div class='carousel-inner' role='listbox'>
                 <div class='item active'>
                    <img src='images/".$image."'>
                </div>
             </div>
                    ";
             }
        $counter++;
        
?>

<a href="#carouselslide" class="left carousel-control"  data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselslide" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

<?php } ?>
 
 <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

            <script type="text/javascript">
    $('.carousel').carousel({
        interval:3000,
        wrap:false

        });
</script>
</body>
</html>
دارای دیدگاه اردیبهشت 27, 1395 توسط mr2016  
سلام

خب الان بزن ببین چطوریه

----------

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<?php
//include "func.php";
//connect();

$sql="SELECT * FROM picture";
                    $result=mysql_query($sql);
                    $slides='';
$Indicators='';
$counter=0;
 
    while($row=mysql_fetch_array($result))
    {
         $image = $row['src'];
       if($counter == 0)
        {
            echo "<li data-target='#carousel-example-generic' data-slide-to='".$counter."' class='active'></li>
            <div class='item active'>
            <img src='images/".$image."'/>
            <div class='carousel-caption'>
              ".$image."
            </div>
          </div>";
 
        }
        else
        {
            echo "<li data-target='#carousel-example-generic' data-slide-to='".$counter."'></li>
            <div class='item'>
            <img src='images/".$image."'  />
            <div class='carousel-caption'>
                 ".$image."
            </div>
          </div>";
        }
        $counter++;
    }
 
?>
<a href="#carouselslide" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselslide" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

 

            <script type="text/javascript">
    $('.carousel').carousel({
        interval:3000,
        wrap:false

        });
</script>
</body>
</html>
دارای دیدگاه اردیبهشت 28, 1395 توسط poyarayaneh  
سلام

تغییری در کدهای شما مشاهده نکردم.

بنابراین نتیجه همانند قبل می باشد.
دارای دیدگاه اردیبهشت 28, 1395 توسط poyarayaneh  
با تغییری که به شکل زیر در کد ها دادم الان اسلاید شو میشه ولی مرتب به تعداد عکس 1 را در هر خط ئرج می کنه ضمن اینکه دایره های تصویر را قرار نمی دهد.

 

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
</head>
<body>
<?php
 include "func.php";
 connect();
 $sql="SELECT * FROM picture";
 $result=mysql_query($sql);
 $counter=0;
?>
<div class="container">
    <div id="carouselslide" class="carousel slide" data-ride="carousel">
<?php

 while($row=mysql_fetch_array($result))
    {
       $image =$row['src'];
       if($counter == 0)
        {

 ?>
         <li data-target="#carouselslide" data-slide-to="<?php echo $counter; ?>">      </ol>
       <div class="carousel-inner"  role="listbox">
            <div class="item active">
                <img src="images/<?php echo $image?>" width="300px" height="300px">
                <div class="carousel-caption">
                    Apple
                </div><!-----caption----->
            </div><!-----item----->
            
      <?php }
      else
      {
      ?>
           <ol>
                   <li data-target="#carousel-example-generic" data-slide-to=<?php $counter ?></li></ol>
                    <div class='item'>
                        <img src="images/<?php echo $image ?>" width="300px" height="300px" />
                        <div class="carousel-caption">
                             <?php echo $image ?>
                        </div>
                      </div>
          <?php }
      
           $counter++;
    }
     ?>      
            <a href="#carouselslide" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselslide" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

        </div><!-----carousel-inner----->
    </div><!-----carousel slide----->
</div><!-----container----->

</body>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval:3000,
wrap:true

});
</script>
</html>

977 سوال

819 پاسخ

1,329 دیدگاه

1,273 کاربر

متاسفانه نیستم

این مطلب را به اشتراک بگذارید

ali.ashkaran@gmail
ما .....
  • سعی بر پاسخگویی به سوالات دیگران داریم.
  • به سوال و یا نظر دیگران احترام می گذاریم .
  • این وبسایت را به دیگران معرفی می کنیم.
  • همواره صمیمیت و ادب را رعایت می کنیم.
  • به سوالمان برچسب های مرتبط اضافه می کنیم.
  • در حین طرح سوال فرد خاصی را مخاطب قرار نمی دهیم .
...