I have a bootstrap carousel. I have two column in each row. I want my images to come from database through php.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/full-slider.css">
<title>Untitled Document</title>
</head>
<body>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<?php
$query = mysql_query("select * from slides");
while($row = mysql_fetcj_array($query)){
$slides = $row['image'];
?>
<div class="item active">
<div class="row">
<div class="col-sm-6 col-xs-6"> <img src="<?php echo $slides ?>" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-6 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
Now the problem is that I have my first div class (item active), and others are just item. When I applied my PHP every div gets class (item active) how I applied loop in PHP that my html did not disturb and my slider run accurately.
I don't know if this is the right way to do it or not..but what i will suggest is to not to apply the active class in the loop.. Let the DOM load and then apply it to the first index of class using JS(or Jquery).
$(document).ready(function(){
$("item")[0].addClass("active");
})
OR you can just add an if in the PHP code for the first index
if(index==0){
echo "<p class='item active'></p>";
}else{
echo "<p class='item'></p>";
}
Something like this? Check for first iteration:
<?php
$isFirst = true;
while (image loop) {
// echoing image start...
echo "<img ";
// echoing stuff
if ($isFirst) {
echo "class='active'";
}
// echoing the end of image
echo " />";
$isFirst = false;
}
?>
Can't comment so will answer, sorry.
Where is your PHP? Hard to figure out whats wrong with it without seeing it..
EDIT: Your code only has one item defined. It's surprising the carousel even works. You need to close the div
Related
I have a bootstrap carousel that works perfectly when i only have images included, but as soon as i add a video, my indicators don't work and i can't click through the remaining slides? Does anyone know what i've done wrong? Here is my code with a little bit of dodgy php:
echo "<div class='carousel-item";
if ($caroselCount == "1") { echo " active"; }
echo "'>";
if($extraPicDetails['file_type'] == "image") {
echo "<img src='Members/".$Details['file_name']."' alt='' style='margin: auto; display: block; background-color: #ffffff;'>";
}
elseif($extraPicDetails['file_type'] == "video") {
echo "<video src='Members/".$Details['file_name']."' loop autoplay muted playsinline width='100%' style='display: block;'>";
}
echo "</div>";
$caroselCount = "0";
All works fine if i just loop through a bunch of pics, but if there are a couple of images and a video... NOPE! Can't click through the slides, can anyone help me please?
Here is the rendered code:
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='Members/44_Pic1_ezgifcomgifmaker.mp4' loop autoplay muted playsinline width='100%' style='display: block;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic2_Polish_20200814_165321683.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic1_image.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
</div>
I tried to reproduce your error but it works all fine. I downloaden a video and images from pixabay and loaded bootstrap 4 through cdn links. Instead of inline css I use the bootstrap class img-fluid to make the media fit better in the carousel, I disabled the indicators in my example.
Below the code I tested:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- <ul class="carousel-indicators">-->
<!-- <li data-target="#demo" data-slide-to="0" class="active"></li>-->
<!-- <li data-target="#demo" data-slide-to="1"></li>-->
<!-- <li data-target="#demo" data-slide-to="2"></li>-->
<!-- </ul>-->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='media/Golden - 48569.mp4' loop autoplay muted playsinline class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_14%20-%20Foto.jpg' alt='' class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_17%20-%20Fotoe.jpg' alt='' class="img-fluid">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to pass on a $image variable to my view (gallerij.blade.php) but it will not work. I get a error message saying: "Undefined variable: image". I do not know how to solve this world.
I have already looked for a solution on Stack Overflow, but I could not find any solution for my answer. I have also looked on the Laracast website. But I could not find a answer there. Finally, I have also asked a fellow programmer to see if he could find a solution, but he also didn't know what was going wrong.
My controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\gallerijs;
class GalerijController extends Controller
{
public function Retrieve(){
$g = gallerijs::find(1);
$image = chunk_split(base64_encode($g->afbeelding));
return view('gallerij ')->with($image);
}
}
My view:
#extends ('Layout')
#section('title')
Galerij
#endsection
#section('content')
<!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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('Pictures/'.$image)}}" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="{{asset('Pictures/loremipsum2.jpg')}}" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="{{asset('Pictures/loremipsum3.jpg')}}" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
#endsection
I try to use the variable in the first img src.
Hopefully I have given you enough information so that you can help me finding a solution.
change:
return view('gallerij ')->with($image);
to:
return view('gallerij ', compact('image'));
I find this to be the cleanest way to pass variables to the view while retaining the variable name.
You can use with() but you must reiterate the variable name (ie: ->with('image', $image))
Or you can define an array of variables to pass as a second argument to view (ie: view('view.template', ['image' => $image]).
That's were the compact function comes in handy. It will create an array from a list of variable names using the variable name as the key (ie: compact('image') creates ['image' => $image])
Please user as image array
like
public function Retrieve(){
$g = gallerijs::find(1);
$image = chunk_split(base64_encode($g->afbeelding));
return view('gallerij ')->with('image',$image);
}
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 AngularJS in header.php and create_test.php files. It is working fine when I execute the files separately.
Then I am calling this header.php create_test.php file.
After calling create_test.php file AngularJS codes are not working.
Why is it so? Can anyone assist me to solve this?
In header.php file,
<?php
//calling methods of methods.php file
include'C:/wamp64/www/performance/header/src/demo/methods.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="http://localhost/performance/login/images/merahkee.png" />
<title> Merahkee Technology Soluctions</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<!--This version is for title attribute-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<!--Angularjs starts-->
<script src="http://localhost/performance/header/src/addons/bootstrap-4/header.js"></script>
</head>
<body style="padding-top:80px;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div ng-app="rootApp" class="container">
<a ng-app = "firstApp" ng-controller = "firstController" class="navbar-brand" href="#">{{ pageTitle }}</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Left nav -->
<ul class="nav navbar-nav mr-auto">
<!--Display project dropdown-->
<li ng-app = "thirdApp" ng-controller = "thirdController" class="nav-item dropdown" style="padding-right:15px;" ><a class="nav-link dropdown-toggle" href="#">{{Project}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Projects </a></li>';
for($i=0;$i<$projectcount;$i++){
//calling test_name() method and storing those values in a string
$test=project_name($count_uid,$user_id,$pro_sql);
$project_name=$test[$i];
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/project/ShowTest_of_project.php?project_name='.$project_name.'&user_id='.$user_id.'" title="'.$project_name.'">'.$projectName.'</a></li>';
}//for loops ends
//show all projects
echo'<li ng-app = "seventhApp" ng-controller = "seventhController"><a ng-repeat="x in sdc_pro" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul><!--dropdown-menu closes-->
</li><!--project dropdown ends-->
<li ng-app = "fourApp" ng-controller = "fourController" class="nav-item dropdown"><a style="padding-right:15px;" class="nav-link dropdown-toggle" href="#">{{Test}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Tests </a></li>';
for($i=0;$i<$testcount;$i++){
//calling test_name() method and storing those values in a string
$test1=recent_test1($test_sql);
$test_name1=$test1[$i];
//project name
$project=recentTest_project($test_sql);
$project_name=$project[$i];
//platform file name
$platform=platform_file();
$platform_file=$platform[$i];
//project id
$project_id=pro_id($test_sql);
$pro_id=$project_id[$i];
//calling file_name() method and storing those values in a string
//$file=load_file_name();
//$file_name=$file[$i];
//echo' <a type="submit" name="testname" href='.$file_name.'>'.$test_name.'</a><br>';
if(strlen($test_name1)>=25){
$testName=substr($test_name1,0,25);
$testName=$testName.'..';
}
else{
$testName=$test_name1;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/RunTest_09.php?test_name='.$test_name1.'&project_name='.$project_name.'" title="'.$test_name1.'">'.$testName.'</a></li>';
}//for loops ends
//show all projects ,delete project and create project
echo'<li ng-app = "eighthApp" ng-controller = "eigthController"><a ng-repeat="x in sdc_test" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul>
</li><!--test dropdown ends-->
<li ng-app = "fifthApp" ng-controller = "fifthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{Report}}</a>
<ul class="dropdown-menu">
<li></li>
</ul>
</li><!--report list ends-->
</ul>
<ul class="nav navbar-nav">
<li ng-app = "sixthApp" ng-controller = "sixthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{default}}</a>
<ul class="dropdown-menu">
<li><a ng-repeat="x in details" class="dropdown-item" href="{{x.href}}">{{x.name}}</a></li>
</ul>
</li>
</ul>
</div><!--collapse navbar-collapse-->
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="http://localhost/performance/header/src/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="http://localhost/performance/header/src/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
</body>
</html>
In cteate_test file,
<?php
include_once 'C:\xampp\htdocs\Performance\header\src\demo\header.php';
include_once 'C:\xampp\htdocs\Performance\project\methods\methods.php';
?>
<!DOCTYPE html>
<html>
<head>
<script>
function ConfirmDelete() {
return confirm("Are you sure you want to delete?");
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/performance/project/css/showAllProject.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Angularjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script >
var app = angular.module("myApp", []);
app.controller("namesCtrl", function($scope) {
$scope.names = [
{name:'PROJECT'},
{name:' |DESCRIPTION'},
{name:' |CREATEDON'},
{name:' |LASTUPDATED'},
{name:' |'},
]
$scope.hrefs = [
{href:'http://localhost/performance/deleteProject_showAll_pro.php?project_name=',src:'http://localhost/performance/css/delete.png',title:'delete',alt:'delete',onclick:'return ConfirmDelete()'},
{href:'http://localhost/performance/editProject_form.php?project_name=',src:'http://localhost/performance/css/edit.ico',title:'edit',alt:'edit',onclick:''},
{href:'http://localhost/performance/copyProject_form.php?project_name=',src:'http://localhost/performance/css/copy_pro.png',title:'copy',alt:'edit',onclick:''},
]
});
</script>
</head>
<body style="font-size:12px;">
<div class="row">
<div class="container">
<div class="col-lg-10" id="col-lg-14" >
</div>
<div ng-app="myApp" ng-controller ="namesCtrl" class="row vertical-center-row" id="myApp">
<div class="col-lg-20" id="myApp-main">
<div class="row">
<div ng-repeat="x in names" class="col" id="col">
{{x.name}}
</div>
</div>
</div>
<div class="col-lg-12" id="project" >
<?php
for($i=0;$i<$procount;$i++){
//calling test_name() method and storing those values in a string
$project=project_name1($user_id);
$project_name=$project[$i];
//description
$desctipt=project_description1($user_id);
$description=$desctipt[$i];
// project creation date
$date=ProjectCreated_date($user_id);
$created_on=$date[$i];
//project edited on
$editDate=ProjectEdited_date($user_id);
$edited_on=$editDate[$i];
//for displaying the project
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
//for displaying the description of the project
if(strlen($description)>=25){
$description=substr($description,0,25);
$description=$description.'..';
}
else{
$description=$description;
}
//display project name, discription,created date and deleted date date
echo '<div class="row" id="row" ng-mouseover="changeImage=true" ng-mouseleave="changeImage=false" ng-init="changeImage=false">';
//projectName
echo'<div class="col">';
echo $projectName;
echo '</div>';
//description
echo'<div class="col" >';
echo $description;
echo '</div>';
//created date
echo'<div class="col" >';
echo $created_on;
echo '</div>';
//last updated date
echo'<div class="col" >';
echo $edited_on;
echo '</div>';
//
echo'<div class="col col-sm-1" ng-repeat="x in hrefs">';
echo '
<img src="{{x.src}}" title="{{x.title}}" alt="{{x.alt}}" style="width:15px;height:15px;border:0;" Onclick=""/>';
//<img ng-show="changeImage" src="http://localhost/performance/css/edit.ico" title="edit" alt="running test" style="width:15px;height:15px;border:0;margin-left:0.5cm">
//<img ng-show="changeImage" src="http://localhost/performance/css/copy_pro.png" title="copy" alt="running test" style="width:15px;height:15px;border:0;margin-left:0.5cm"/>';
echo '</div>';
echo'</div>';//display project name, discription,created date and deleted date date div ends
echo '<hr id="hr">';}//for loop ends
?>
</div> <!--project div ends-->
<div class="col-lg-12" id="createProject" >
<center><img src="http://localhost/performance/css/create.png" title="Create Test" alt="Create New Project" id="createProjectIMG"></center>
</div>
</div><!--myApp div ends-->
</div><!--container-fluid div ends-->
</div><!--row div ends-->
</body>
</html>
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