Page 1 of 1
PHP BOOTSTRAP THUMBNAIL CAROUSEL
Posted: Sun Aug 10, 2014 6:44 am
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
Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL
Posted: Sun Aug 10, 2014 6:52 am
by Celauran
What have you tried? What problems are you encountering? Please post some code.
Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL
Posted: Sun Aug 10, 2014 12:21 pm
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 </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>
";
}
Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL
Posted: Sun Aug 10, 2014 12:22 pm
by harshitpunn
And I am not getting the desired result
Re: PHP BOOTSTRAP THUMBNAIL CAROUSEL
Posted: Sun Aug 10, 2014 12:35 pm
by Celauran
<span style='color:blue' title='I'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.