Trying a dynamic carousel of bootstrap-4 in which the images comes from the database. But only single div is allowed to be active in carousel, so how can i achieve it ? How can I get active in first div in foreach loop.
<?php
include '../employee.php';
$obj= new employees();
$result=$obj->select_image();
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
foreach ($result as $values){
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item active" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I appreciate all the efforts all of them are feasible, but i found one more solution, which i think is the simplest.
I just simply used $count here!
<?php
include '../employee.php';
$obj= new employees();
$result=$obj->select_image();
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Dhruv</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$count = 0;
foreach ($result as $values){
?>
<div class="carousel-item <?php
if($count==0){
echo "active";
}
else{
echo " ";
}
?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class=" w-100 d-block " alt="...">
</div>
<?php
$count++;
}
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
A simple method in php would be to have a boolean & use it to determine if it's the first iteration of your loop.
<?php
$isFirst = True;
foreach ($result as $values){
echo $values['profile_pic'];
if ($isFirst == True) {
$isFirst == False;
?>
<div class="carousel-item active" data-interval="2000">
<?php
} else {
?>
<div class="carousel-item" data-interval="2000">
<?php
}
?>
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
You can use an index in your for loop and check to see if it's 0 (the first loop).
<?php
foreach ($result as $index => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
There are a few options for how you can solve this. I'll describe the easiest way to solve it, but let me know if your array isn't fit to my condition.
1. If keys of your array is numeric, you can use this type of condition
PHP 7.3
<?php
foreach ($result as $key => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($key === array_key_first($result)): ?>active<?php endif;?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
I've added php <?php if ($key === array_key_first($result)): ?>active<?php endif; ?>
which mean that active class should be put only to the first element of your array
PHP <= 7.3
<?php
foreach ($result as $key => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($key === key($result)): ?>active<?php endif; ?>"
data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
Key condition is php <?php if ($key === key($result)): ?>active<?php endif; ?>
All PHP versions (easiest)
<?php
foreach ($result as $index => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($index === 0): ?>active<?php endif; ?>"
data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
Here you only check index which is numeric and put active class only to the first([0]) element of your array
Related
User first search for specified "doctors" at it redirects to the "search.php" page. Then it shows the results from database.What i want is , when the user is seeing the results to sort them "A-Z". If you need also the place when users searches for "specified doctors i will post it,just thought you would not need it :)
<?php
include 'models/doctors.class.php';
// error_reporting(0);
$search = new doctors();
if(isset($_POST['submit'])){
$s= $search->filterDoctors($_POST);
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/search.css">
<link rel="stylesheet" href="assets/css/sanascout-font.css">
<link rel="icon" type="image/png" href="assets/images/logo-ssc1.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Healthcare</title>
</head>
<body>
<!-- <section>
<div class="container-fluid firstSectionn">
<div class="popins-font">
<p class="searchHere text-center"><i class="bi bi-arrow-left-short pull-left"></i>Zürich <i class="bi bi-chat-dots pull-right"></i></p>
</div>
</div> -->
<section>
<div class="container-fluid thisContainerBGColor popins-font">
<div class="row">
<div class="col text-center pt-4 pb-3">
<a href="#" onclick="history.go(-1)" class="text-decoration-none text-light"> <i
class="bi bi-arrow-left-short"></i></a>
</div>
<div class="col text-center lh-1 pt-3 pb-3">
<span class="span-selected-area">Selected area</span> <br>
<span class="span-place">
<?php
$i = 0;
foreach($s as $row){
echo $row['location'];
$i++;
if($i == 1){
break;
}
}
?>
</span>
</div>
<div class="col text-center pt-4 pb-3">
<!-- <i class="bi bi-chat-dots"></i> -->
</div>
</div>
</div>
</section>
</section>
<section>
<section class="searched-area mt-4">
<div class="container">
<div class="header66">
<div style="display: flex; justify-content: space-between;">
<p class="fs-6 popins-font fw-bold" id="text-color">Available Doctors</p>
<!-- <a href="#" class="text-decoration-none">
<p class="fs-6 popins-font fw-bold" id="text-color">See all</p>
</a> -->
</div>
</div>
</div>
</section>
Filter-A-Z
<div>
<?php
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
?>
</div>
<section>
<div class="container">
<?php
foreach($s as $row1){
?>
<a href="therapist.php?id=<?php echo $row1['User_ID']; ?>" class="text-decoration-none">
<div class="therapistCardOne mx-2 popins-font my-2">
<div class="row py-2">
<div class="col-3 g-0">
<div class="imgW text-center g-0 ps-2">
<img src="assets/images/006.png" class="img-fluid ms-2" alt="" width="70px"
height="80px">
</div>
</div>
<div class="col-8 g-0 ps-2">
<span class="span1"><?php echo $row1['full_name'];?></span>
<span class="ps-2">
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star icon-ccc"></i></span><br>
<span class="span2">Location :
<?php echo $row1['location'];?>
</span> <br>
<span class="span3"><i class="bi bi-clock icon-cc"></i> 12:00pm - 16:00pm</span> <span
class="span4 ps-2"><i class="bi bi-geo-alt icon-cc"></i> Zurich New Clinic</span>
</div>
<div class="col-1 g-0 pe-2">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</div>
</a>
<?php
}
}
else {
header("Location:therapist-list.php");
}
?>
</section>
You can use ajax and a php function ,
Create a form inside the search.php
And then save the post that you used to redirect to search.php ,
And use php function to order the doctors.
I want to open and have access to my 2 different databases from mysql and display it on 2 different charts respectively. I have put a bootstrap carousel that would ease navigation between 2 charts. Below is my code.
$connect = mysqli_connect("localhost", "root", "", "ws_monitoring");
$query = "SELECT mb_weight, mb_weight_dt, mb_refno, mb_date, mb_weight FROM conveyor_in_entry";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ mb_weight_dt:'".$row["mb_weight_dt"]."', mb_refno:".$row["mb_refno"].", mb_date:".$row["mb_date"].", mb_weight:".$row["mb_weight"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
$newconnection = mysqli_connect("localhost", "root", "", "cut" )
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart with PHP & Mysql | lisenme.com </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2>Carousel Test</h2>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="chart" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart1" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart2" class="chart" style="width:100%; height:300 px;"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel" href="#carousel" role="button" data-slide="prev">
<span class="sr-only"></span>
</a>
<a class="right carousel" href="#carousel" role="button" data-slide="next">
<span class="sr-only "></span>
</a>
</div>
</body>
</html>
<script>
Morris.Line({
element : 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'mb_weight_dt',
ykeys:['mb_refno', 'mb_date', 'mb_weight'],
labels:['mb_refno', 'mb_date', 'mb_weight'],
hideHover:'auto',
stacked:true
});
</script>
Chart2 will be coming from a new from a different database with different attributes, so far when I create another query for mysql the same database from the first one appears for the 2nd chart.
I am using a foreach loop to show up images to appear in the slider. The resultset is as follows:
array (size=4)
0 =>
array (size=1)
'file_name' => string 'SHG_Petty_shop2.jpg' (length=19)
1 =>
array (size=1)
'file_name' => string 'Manavanur_Statue_innaug3.jpg' (length=28)
2 =>
array (size=1)
'file_name' => string 'SHG_Group_meeting6.jpg' (length=22)
3 =>
array (size=1)
'file_name' => string 'Low_cost_toilet4.jpg' (length=20)
Below is the code i did to make the slider in view.
<?php foreach($slider_info as $key=>$slider)
{ ?>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="height: 300px;width:100%;" src="<?php //echo base_url();?>upload/sliderimages/<?php echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
</div>
</div>
<?php } ?>
But things are not working as i expected.. I want all the images from the result set to be shown up in the image carousel. I am trying using the foreach loop in codeigniter. I got all the images in the slider, but it shown up horizontally, the slider is not working .Kindly help..
Try this code:
An "active" class must be appended on the first slide, not for all.
<?php
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach($slider_info as $key=>$slider) { ?>
<div class="item <?php echo ($key == 0) ? "active" : ""; ?> ">
<img style="height: 300px;width:100%;" src="<?php echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
</div>
<?php } ?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
try to change this:
<?php foreach($slider_info as $key=>$slider)
to this:
<?php foreach($slider_info as $slider)
Because you don't need the key value inside your loop, you need to take the array with its value
Hello I had a program written in php. I want select a category and shows articles related. I select one category but dont show a articule. Anybody helps me?
catalogo.php
<div class="col-md-4-fluid">
<form class="navbar-form navbar-left" role="search" action="buscartipo.php" method="post" enctype="multipart/form-data" class="pull-right">
<div class="input-group">
<select class="form-control" name="tipo">
<option value="" selected="selected">Buscar por tipo</option>
<option value="tecnologia">Llave T</option>
<option value="deportes">Herramientas especiales</option>
<option value="arte">Kit de puesta a punto</option>
<option value="viajes">Otros</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</form>
</div>
</div>
<!--Fin row buscadores-->
<!--Comienzo row ofertas-->
<div class="row" id="catalogo">
<?php
include "conexionnew.php";
if(isset($_SESSION['empleado'])){
$idempleado=$_SESSION['empleado']['id_usuario'];
$resultado=mysqli_query($conexion,"SELECT * FROM empleado where id_usuario!='$id_usuario'");
while($array=mysqli_fetch_array($resultado)){
?>
<div class="col-md-3">
<div class="thumbnail">
<a class="example-image-link" href='<?php echo($array['imagen']);?>' data-lightbox="example-set" data-title="Optional caption."><img class="example-image" src='<?php echo ($array['imagen']);?>' alt=""/></a>
<div class="caption">
<p><?php echo $array['descripcion'];?></p>
<h3><?php echo "$".$array['precio'];?></h3>
<?php echo "<p><a href='descripcion.php?id_plantilla=$array[id_plantilla]' class='btn btn-primary' role='button'>Comprar ahora</a></p>";?>
</div>
</div>
</div>
<?php
}
}else{
$resultado=mysqli_query($conexion,"SELECT * FROM articulo");
while($array=mysqli_fetch_array($resultado)){
?>
<div class="col-md-3">
<div class="thumbnail">
<a class="example-image-link" href='<?php echo($array['imagen']);?>' data-lightbox="example-set" data-title="Optional caption."><img class="example-image" src='<?php echo ($array['imagen']);?>' alt=""/></a>
<div class="caption">
<p><?php echo $array['codarticulo'];?></p>
<h3><?php echo "$".$array['precio'];?></h3>
<?php echo "<p><a href='descripcion.php?idarticulo=$array[idarticulo]' class='btn btn-primary' role='button'>Ver detalle</a></p>";?>
</div>
</div>
</div>
<?php
}
}
?>
<!--Fin row ofertas-->
</div>
</div>
the values is received by buscartipo.php
<?php
session_start();
$tipo=$_POST['tipo'];
if(empty($tipo)){
echo "<script>alert('Seleccione un tipo de plantilla')</script>";
echo "<script>location.href='catalogo.php'</script>";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Inicio | F y F herramientas</title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
<!-- para sweet alert2 -->
<script src="bower_components/es6-promise/es6-promise.auto.min.js"></script> <!-- for IE support -->
<script type="text/javascript" src="js/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/sweetalert2/dist/sweetalert2.min.css">
</head>
<body class="homepage">
<?php require_once('cabecera.php'); ?>
<section id="feature">
<div class="container">
<!--Container cabecera-->
<div class="container" id="contenido-cabecera">
<div id="titulo-cabecera">Articulos</div>
<p>Filtrado por tipo</p>
</div>
<!--Fin Container cabecera-->
<!--Comienzo container buscar por tipo-->
<div class="row" id="buscar-tipo">
<?php
include "conexionnew.php";
/*$id_articulo=$_SESSION['articulo']['idarticulo']; */
$resultado=mysqli_query($conexion,"SELECT * FROM articulo where tipo='$tipo'");
while($array=mysqli_fetch_array($resultado)){
if($array['idarticulo']!=$id_articulo){
?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<a class="example-image-link" href='<?php echo($array['imagen']);?>' data-lightbox="example-set" data-title="Optional caption."><img class="example-image" src='<?php echo($array['imagen']);?>' alt=""/></a>
<div class="caption">
<p><?php echo $array['descripcion'];?></p>
<h3><?php echo "$".$array['precio'];?></h3>
<?php echo "<p><a href='descripcion.php?id_plantilla=$array[id_plantilla]' class='btn btn-primary' role='button'>Comprar ahora</a> </p>";?>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
<!--Fin container buscar por tipo-->
</section>
<?php require_once('pie.php'); ?>
</html>
Is there anyone who try out bootstrap slide with opencart slideshow module?
Here is my code i am trying but getting all active classes. Someone can help me plz.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner slideshow <?php echo $module; ?>">
<div class="item active">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } ?>
<?php } ?>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
UPD: loop must be like this
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner slideshow<?php echo $module; ?>">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } else { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } ?>
<?php } ?>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="bootstrap_left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="bootstrap_right"></span></a>
</div>
</div>
and jquery
<script type="text/javascript"><!--
$(document).ready(function() {
$('.item:first-child').addClass('active');
$('.carousel').carousel();
});
--></script>
As you can see in your 3rd line you have
<div class="item active"> .
You need to include this inside the loop of your php.
Then create a condition that if it is the first item, set its class as item active and then in your else statement just item.
Try work it out with this example code.
<?php $i = 1; ?>
<?php foreach ($rows as $row): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
<div class="<?php echo $item_class; ?>">
<a href="<?php echo $row['url']; ?>">
<img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
</a>
</div>
<?php $i++; ?>
<?php endforeach; ?>
Have you refer or check the html version outputted of your code. If simillar
to what should bootstrap carousel setup should be?
Please do refer with it . BOOTSTRAP CAROUSEL
Else refer to this fiddle JSFIDDLE DEMO
Carousel Script
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slid', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
Manchary had the right idea. I have tested this, and run it in my Opencart.
Here's the full code to add to:
catalog/view/theme/yourtheme/template/module/carousel.tpl
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$i = 0;
foreach ($banners as $banner) {
echo "<li data-target=\"#myCarousel\" data-slide-to=\"".$i."\" class=\"indicator\"></li>\n";
$i++;
}
?>
</ol>
<!-- slides -->
<div class="carousel-inner">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } else { ?>
<div class="item"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></div>
<?php } ?>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
$('#myCarousel ol.carousel-indicators li:first').addClass('active');
$('#myCarousel .item:first').addClass('active');
$('#myCarousel').carousel({
interval: 8000
});
});
//]]>
</script>
Note* If jQuery document ready is causing grief, you can try
window.onload = function() {
// code here
}
Hope this helps someone.