PHP BOOTSTRAP THUMBNAIL CAROUSEL

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
harshitpunn
Forum Newbie
Posts: 7
Joined: Tue Jul 01, 2014 1:03 pm

PHP BOOTSTRAP THUMBNAIL CAROUSEL

Post by harshitpunn »

Code: Select all

    <div class="container">
    <div class="col-md-12">
         <h1>Bootstrap 3.1.1 Thumbnail Slider</h1>

        <div class="well-none">
            <div id="myCarousel" class="carousel slide">
                
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6"><a href="#x col-xs-6" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 col-xs-6"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner--> 
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
            </div>
            <!--/myCarousel-->
        </div>
        <!--/well-->
    </div>
</div>






Want to make such carousel with php and want to add images through database. I am facing problem while placing images in tag div with class item and with div class item active pls help
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL

Post by Celauran »

What have you tried? What problems are you encountering? Please post some code.
harshitpunn
Forum Newbie
Posts: 7
Joined: Tue Jul 01, 2014 1:03 pm

Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL

Post by harshitpunn »

Code: Select all

  if(isset($_GET['product_id']) && isset($_GET['product_category']))
    {
                        
         $product_id     = mysql_real_escape_string(htmlentities($_GET['product_id']));
          $query = "SELECT * FROM products WHERE product_id=$product_id";
          $result = mysql_query($query);
                        
     while($product = mysql_fetch_array($result))
     {
        $product_id             = $product['product_id'];
        $product_title          = $product['product_title'];
        $product_image          = $product['product_image'];
        $product_blog           = $product['product_blog'];
         $product_description= $product['product_description'];
         $blog_title                     = $product['blog_title'];
         $product_price          = $product['product_price'];
         $blog_image                     = $product['product_blogimage'];
       $link                           = $product['product_link'];
       $by                                     = $product['username'];
      $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";


                        
                
                        
                        echo "  
                               <h1 class='headt'>$product_title</h1>    
                                     <div class='col-md-6 con_p'><img src='product_images/$product_image' style='height:400px;'/></div>
                                             <div class='col-md-5 con_pt'><h1>$product_title</h1>
                                                    <p>$product_description</p>
                                                     <p><strong>$product_price</strong></p>
                                                          <h2><strong>To Grab The Offer&nbsp;</strong><button><a href='$link' target='_blank'>Click Here</a></button></h2>        
                                                                 </div>
                        <div class='fb-like' data-href='$actual_link' data-width='50' data-layout='button_count' data-action='like' data-show-faces='true' data-share='true'></div>
                                                                                                                                                                                                                                                                                                                                                                
                                                   <div class='col-md-7 con_pt'>
                                                                    </div>
                                                                          <div class='clearfix'></div>
                                                                                 <div class='blg'><h1>$blog_title</h1>
                                                                                    <p>BY: <span>$by</span></p>
                      <div class='blg_d'><div class='col-md-6 con_p'><img src='blog_images/$blog_image' style='height:400px;'/></div>
                                                                                                                                                                                                                                                <p>$product_blog</p>                     
                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                        
                                 
                                 ";
                        
                }
                
                
        echo "                  <div class='rel_search blg' style='background:none !important; box-shadow:none'>
                                                <h1>Related Search</h1>
                                                        <div id='postwrapper' class=' col-sm-12 col-xs-12'>
                                                                         <div class='container'>
                                                                        <div class='col-md-12'>
                                                                                <div class='well-none'>
                                                                                <div id='myCarousel' class='carousel slide'>
                                                                                        <!-- Carousel items -->
                                                                                                <div class='carousel-inner'>
                                                                                                                
                                                                                                                        <div class='item active'>
                                                                                                        <div class='row'>
                                                        
                                                        
                                                        
                                                        
                                                                                                          
                                ";
                        
                                        $product_category= mysql_real_escape_string(htmlentities(trim($_GET['product_category'])));
                                        $product_category = explode(",",$product_category);
                                        $where = "";
                                        $total_keywords = count($product_category);
                                        foreach($product_category as $key=>$keyword)
                                        {
                                                $where.="category LIKE '%".$keyword."%'";
                                                if($key !=($total_keywords-1))
                                                {
                                                        $where.=" OR ";
                                                }
                                        }
                
                        $query1 = "SELECT DISTINCT * FROM products WHERE $where LIMIT 5";
                        $result1 = mysql_query($query1);
        
                while($product = mysql_fetch_array($result1))
                {
                                                
                                                $product_id             = $product['product_id'];
                                                $product_title          = $product['product_title'];
                                                $product_image          = $product['product_image'];
                                                $product_blog           = $product['product_blog'];
                                                $product_category       = $product['category'];
                                                $product_small          = $product['product_small'];
                                                $product_titlesmall = $product['product_titlesmall'];
                                                
                                                
                                                
                                                        
                                                        
                                                
                                                
                                                        echo "
                                                                
                                                                        <div class='col-xs-6 col-sm-3 col-xs-12 '>
                                                                        <div class='product-card  masonry-brick'>
                                                                                <div class='product-card-body'>
                    <div class='product-image'> <a class='whole-card pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'></a>
                                                                                                        <div class='hover'></div>
 <a href='product.php?product_id=$product_id&product_category=$product_category'><img src='product_images/$product_image' alt=' ' style='width:200px; height:210px;'></a> </div>
                                                                                                        <div class='product-title-wrap'>
                                 <div class='likes-and-others'> <a class='whole-card2 pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'></a>
                                                                                                                        <div id='snippet-like-6990-like'>
                      <div class='like on'> <a class='ajax' title='Likes' href='product.php?product_id=$product_id&product_category=$product_category'> <span>2</span> </a>
                                                                                                                                <div id='snippet-like-6990-dialog'></div>
                                                                                                                                                </div>
                                                                                                                                                        </div>
                                <a title='Comments' class='talk pdhrf' href='#'>0</a> <a class='eye pdhrf' title='Views' href='#'>38</a> </div>
<div class='product-title'> <a class='title pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'>$product_titlesmall...</a> <p>".html_entity_decode(strip_tags($product_small))."..</p>
                                                                                                                                                                                <div class='author-view'>
                                                                                                                                                                                        <a class='view pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'>View</a> </div>
                                                                                                                                                                                                </div>
                                                                                                                                                                                                        </div>
                                                                                                                        <a href='#'><img class='new' src='images/product/new_product.png'></a> </div>
                                                                                                                                                        <div class='product-card-separator'></div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                </div> 
                                                                                                                                                                                                                                                
                                                                
                                                                        
                                                                ";
                
                                
                        }
                        
                                echo "  </div>
                                                </div>
                                        ";              
                        
                        
                                        
                        
                        $query2 = "SELECT DISTINCT * FROM products WHERE $where ORDER BY RAND() LIMIT 12";
                        $result2 = mysql_query($query2);
                        $counter = 4;
                        $n = 1;         
                        $val;
                        while($products= mysql_fetch_array($result2))
                {
                                                
                                                $product_id             = $products['product_id'];
                                                $product_title          = $products['product_title'];
                                                $product_image          = $products['product_image'];
                                                $product_blog           = $products['product_blog'];
                                                $product_category       = $products['category'];
                                                $product_small          = $products['product_small'];
                                                $product_titlesmall = $products['product_titlesmall'];
                                                
                                                
                                        
                                if($counter == (4+($n-1)*4))
                                {
                                        echo "
                                                          <div class='item'>
                                                <div class='row'>
                                        
                                        
                                        ";
                                }                       
                                                        
                                                        
                                                        
                                                        
                                                
                                                
                                                        echo "
                                                                
                                                                        <div class='col-xs-6 col-sm-3 col-xs-12 '>
                                                                        <div class='product-card  masonry-brick'>
                                                                                <div class='product-card-body'>
                                                                                <div class='product-image'> <a class='whole-card pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'></a>
                                                                                                        <div class='hover'></div>
<a href='product.php?product_id=$product_id&product_category=$product_category'><img src='product_images/$product_image' alt=' ' style='width:200px; height:210px;'></a> </div>
                                                                                                        <div class='product-title-wrap'>
               <div class='likes-and-others'> <a class='whole-card2 pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'></a>
                                                                                                                        <div id='snippet-like-6990-like'>
                          <div class='like on'> <a class='ajax' title='Likes' href='product.php?product_id=$product_id&product_category=$product_category'> <span>2</span> </a>
                                                                                                                                <div id='snippet-like-6990-dialog'></div>
                                                                                                                                                </div>
                                                                                                                                                        </div>
                <a title='Comments' class='talk pdhrf' href='#'>0</a> <a class='eye pdhrf' title='Views' href='#'>38</a> </div>
     <div class='product-title'> <a class='title pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'>$product_titlesmall...</a> <p>".html_entity_decode(strip_tags($product_small))."..</p>
                                                                                                                                                                                <div class='author-view'>
                                                                                                                                                                                        <a class='view pdhrf' href='product.php?product_id=$product_id&product_category=$product_category'>View</a> </div>
                                                                                                                                                                                                </div>
                                                                                                                                                                                                        </div>
                                                                                                       <a href='#'><img class='new' src='images/product/new_product.png'></a> </div>
                                                                                                                                                  <div class='product-card-separator'></div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                </div> 
                                                                                                                                                                                                                                                
                                                                
                                                                        
                                                                ";
                                                                
                                                                
                                                                $val = (8+(($n-1)*4));
                                                                if($counter == $val)
                                                                {
                                                                        echo"</div>
                                                                                        </div>
                                                                        
                                                                        ";
                                                                        
                                                                        $n++;
                                                                        $counter--;
                                                                
                                                                }
                                $counter++;
                        }       
                        
                        
                                echo $counter;
                                        echo $val;
                                        
                                        if($counter < $val)
                                        {
                                                
                                        
                                                echo"</div>
                                                                                        </div><!-----kvbdsjkvbsjkzdbsjkd------- -->
                                                                        
                                                                        ";
                                        }
                                        
                                        echo"
                                        </div>
                <!--/carousel-inner--> 
                <a class='left carousel-control' href='#myCarousel' data-slide='prev'><i class='fa fa-chevron-left fa-2x'></i></a>

                <a class='right carousel-control' href='#myCarousel' data-slide='next'><i class='fa fa-chevron-right fa-2x'></i></a>
            </div>
            <!--/myCarousel-->
        </div>
        <!--/well-->
    </div>
</div>
                                                </div>
                                                        </div>
                                        ";
                
                        
                }




Last edited by harshitpunn on Sun Aug 10, 2014 12:47 pm, edited 1 time in total.
harshitpunn
Forum Newbie
Posts: 7
Joined: Tue Jul 01, 2014 1:03 pm

Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL

Post by harshitpunn »

And I am not getting the desired result
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL

Post by Celauran »

<span style='color:blue' title='I&#39;m naughty, are you naughty?'>smurf</span> wrote:And I am not getting the desired result
Again, can you elaborate? What are you getting? How does it differ from what you're expecting? You dumped over 200 lines of code with no real indication of what I'm even looking for.
Post Reply