I'm working on a carousel in which each images will come from my PHP database. However, each slide just show the same thing. Not sure what loop to include since there is already a 'while' statement.
My database structure is this.
The table name is 'items'
column 1 - id
column 2 - name
column 3 - image
What I'm trying to achieve is for every slide to show the 'image' of every 'id.
Example:
id #1 - potato.jpg
id #2 - tomtato.jpg
and so on...
The code is below.
function display_carousel(){
global $conn;
echo "<div id='myCarousel' class='carousel slide' data-ride='carousel'>
<ol class='carousel-indicators'>
<li data-target='#myCarousel' data-slide-to='0' class='active'></li>
<li data-target='#myCarousel' data-slide-to='1' class='active'></li>
</ol>
<div class='carousel-inner' role='listbox'>";
$sql = "SELECT image FROM items";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
extract($row);
echo "<div class='item active'>
<img src='$image' alt='Image'>
<div class='carousel-caption'>
<h3>CAPTION</h3>
</div>
</div>
<div class='item'>
<img src='$image' alt='Image'>
<div class='carousel-caption'>
<h3>CAPTION</h3>
</div>
</div>";
}
echo "</div>";
echo "<a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>
<span class='sr-only'>Next</span>
</a>
</div>";
}
The first thing I would do is to make sure what you are getting out of your database is what you think it is by using a var_dump(). Just make sure you are not getting three of the same images from there.
echo '<pre>';
var_dump($result);
echo '</pre>';
Related
I have created a module in Joomla which will fetch the values from Joomla database table and show in a bootstrap HTML carousal. fetching part is working well but whenever I put the PHP code into Html code where I want those fields to display the carousel is not working. any help will be appreciated. below is my full page code (tmpl/dafault.php)
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/afterglowplayer#1.x"></script>
<?php
defined('_JEXEC') or die;
?>
<?php
$db = JFactory::getDBO();
try {
$query = $db->getQuery(true);
$query->select("*")
->from("tkps5_spotlightamsw_spotlight");
$db->setQuery($query);
$row = $db->loadObjectList();
}
catch (exception $e) { echo $e; }
?>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-md-6">
<h2 class="block-title1">xyz text</h2>
<p class=" "><a class="button subbutton btn btn-border1" href="#">More info</a></p>
</div>
<div class="col-md-6">
<h2 class="block-title1">Spotlight</h2>
<!-- Wrapper for slides -->
<script>
$(document).ready(function() {
//Enable swiping...
$(".carousel-inner").swipe( {
//Generic swipe handler for all directions
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$(this).parent().carousel('prev');
},
swipeRight: function() {
$(this).parent().carousel('next');
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
</script>
<?php foreach ($row as $row): ?>
<?php
$fetured_spotlight = $row->featured_spotlight;
$name = $row->name;
$modified_date = $row->modified;
if($fetured_spotlight == 1 )
{
echo "<div id='myCarousel' class='carousel slide' data-ride='carousel' data-touch='true'> ";
echo " <div class='carousel-inner'>";
echo substr($modified_date,0 , 10);
echo "<div class='item '>";
echo "<img src='".$row->thumbnailimage."' alt='".$name."'>";
echo "<div class='carousel-caption1'>";
echo "<p><strong>".$name."</strong></p>";
echo "</div>";
echo "</div>";
//echo $row->name;
echo " <a class='left carousel-control' href='#myCarousel' data-slide='prev'>";
echo " <span class='glyphicon glyphicon-chevron-left'></span>";
echo " <span class='sr-only'>Previous</span>";
echo " </a>";
echo " <a class='right carousel-control' href='#myCarousel' data-slide='next'>";
echo " <span class='glyphicon glyphicon-chevron-right'></span>";
echo " <span class='sr-only'>Next</span>";
echo " </a>";
echo "</div>";
}
?>
<?php endforeach; ?>
<!-- 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>-->
<p class="align-right"><a class="button subbutton btn btn-border1" href="flame-spotlight">VIEW ALL</a></p>
</div>
</div>
</div>
</div>
Finally i got the answer where i was not assigning the "active" class to first slider image. so below is my working code .. just posting for loop rest of the code is same..
<?php foreach ($row as $key=>$row): ?>
<?php
$fetured_spotlight = $row->featured_spotlight;
$name = $row->name;
if($fetured_spotlight == 1 )
{
?>
<div class='item <?php echo ($key == 0) ? "active" : ""; ?>'>
<?php
echo "<img src='".$row->thumbnailimage."' alt='".$name."'>";
echo "<div class='carousel-caption1'>";
echo "<p><strong>".$name."</strong></p>";
echo "</div>";
//echo $row->name;
echo "<br />";
}
?>
</div>
<?php endforeach; ?>
I am looping information from database as $id , $akt and $nmn. I want to make some if-statements in this print if its possible.
I have a counter before my loop $counter = 0; and adding $counter++;
I want to print td with the dropdown once. But i want to print the li as long there is any in database. I think the right way is to it with a counter. But i need some help. Any suggestion?
print("<td class='center'><div class='dropdown'>
<button class='btn btn-primary dropdown-toggle'
type='button' data-toggle='dropdown'> Activities
<span class='caret'></span></button>
<ul class='dropdown-menu'>
<li><a href='#'>$id , $akt , $nmn </a></li>
</ul>
</div>
</td>\n");
print("</tr>\n");
I have many td in this tr.
This is what i wanna do.
if ($counter < 1){
print("<td>>$produktionsgrupp</td>\n");
print("<td>$namn</td>\n");
print("<td>$kvikt</td>\n");
print "<td class='center'> <div class='dropdown'> <button class='btn btn-primary dropdown-toggle'
type='button' data-toggle='dropdown'> $nmn
<span class='caret'></span></button>
<ul class='dropdown-menu'>";
}
print "<li> <a href='#'> $nmn </a> </li>";
if ($counter < 1){
print "</ul> </div> </td>\n";
print("</tr>\n");
}
First print things that you print only once:
print "<td> <div> <ul class='dropdown-menu'>";
Then loop the data you retrieved from your db:
foreach ($data_from_db as $data) {
print "<li> <a href='#'> $data </a> </li>";
}
Then close the elements you've opened before:
print "</ul> </div> </td>";
I'm not sure if this is what you're looking for, your question was not quite clear. Feel free to comment tho, hope it helps!
I'm not experiencing any difficulty with pulling data from a db table in CodeIgniter and displaying it in a bootstrap modal window. Using this button link;
<a href='#' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a>
I'm able to access the modal window no problem and display the results of this following coding;
<!-- alert view -->
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<div class='modal-content'>
<div class='modal-header'>
<?php
foreach ($article->result() as $a) {?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
</div>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
<?php } ?>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
The exact issue I'm having is imposing a limit on the returned results of the foreach() loop. If I use something like $i=0; if($i==1) break; before the foreach(), I get the same content article_id result. To add to my confusion and difficulty, when I try to make article_id the href of the View link, ALL db table entries are pulled into the modal window.
I tried working through the query builder chapter in the CI docs dealing with single result arrays as that was most applicable to my situation. That was the basis for the following approach below;
CONTROLLER
$data['a'] = $this->article_model->get_modal();
$this->load->view('article_submit',compact('article', 'page_link', 'category'), $data);
MODEL
function get_modal()
{
$results = array();
$this->db->select('*');
$this->db->from($this->tbl_article);
$query = $this->db->get();
if($query->num_rows() > 0)
{
$results = $query->result();
}
return $results;
}
VIEW
<?php
foreach ($article->result() as $a) {?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
</div>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
<?php } ?>
I ended up keeping the VIEW coding as it was working for me without the model/controller code. I've actually spent an extra hour on research, trying desperately to ascertain there weren't any answers in the wild on Google or SO. I even gave it one more Doug Flutie Hail Mary;
VIEW
<?php
$i=0;
foreach ($article->result() as $a) if($i==1) break; {?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
</div>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
<?php $i++; ?>
<?php } ?>
My head is literally pounding # this point...thanks for any clues around this. It could also be something I'm completely missing as well as there's no holiday from Human Error (lol!).
UPDATE
Currently I'm stuck trying to retool using solutions suggested by #manu joseph & #webcrazymaniac - #webcrazymaniac: not sure if I understand your question about how the article list is built. It may be that I haven't posted enough code for you - please inform me as to what you need to see. As far as the inclusion of the echo for the #modalItem of the View link - not doing anything different for me. #manu joseph, I cannot change $article->result() to article->row() as the former is how the article data is displayed to the page (ie);
<?php
foreach ($article->result() as $a)
{
echo "<tr>".
"<td>$a->article_id</td>".
"<td>$a->title</td>".
"<td>$a->category_name</td>".
"<td>$a->access_level</td>".
"<td>$a->public_date</td>".
"<td><img class='img-responsive img-circle' style='width:100%; height:50px' src='".base_url()."images/posts/$a->image' title='Image' ></td>".
"<td>".
"<a href='".$a->article_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a> ".
"<a href='".base_url()."article/view/$a->article_id' class='btn btn-primary btn-sm'>Edit</a> ".
"<a href='".base_url()."article/delete/$a->article_id' class='btn btn-danger btn-sm'>Delete</a> ".
"</td>".
"</tr> ";
}
?>
the above being the table that db results are being echoed out to. #manu joseph, I've noticed initially that the $i=0; lines are only ever functional when I don't try to add the article_id in the View button link. That's where the answer lies for me, since, when that happens, then I'm back to the problem that the modal only displays a single listing based on the click of the View button link, but it happens to grab the identical singular result to display within the modal no matter WHAT View button link is clicked upon. Funny how now my previous pagination problems are non-existant (lol!).
SO CLOSE I CAN TASTE IT...
An hour's worth of tweakling has gotten me to the desired (if skewed) result of just displaying a single articles' details;
MODAL WINDOW VIEW LINK
"<a href='".$a->article_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a> ".
MODAL CONTENT
<div class='modal-content'>
<div class='modal-header'>
<?php
foreach ($article->result() as $a) $i=0; if($i==1) break; {
?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
</div>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
<?php $i++; ?>
<?php } ?>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
PICTURED RESULT:
I don't know that you can see (probably with image enlargement) the cursor arrow hovering over the 1st View button on page, but the specific article_id is not being returned. Like I said, so close I can taste it.
Misery Index UPDATE:
Thank you so much #manu joseph for his continuing attempt to set me right - the code;
<?php
$i = 0;
foreach ($article->result() as $a)
{
echo $i."<br>";
if( $i == 1 ) break;
?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
</div>
<?php
$i++;
}
die();
?>
Results in the image below;
The value of $i is echoed at the top above the title and the incremented value $i++ is echoed at bottom of modal and the close button is vanished. I'm playing a bit with your sequencing as it's neater than what I have currently.
I think what needs to be addressed is the View button links as when they're hovered over, the correct article_id is shown, but the modal always only manages to pull in the 1st recordset and never increments to show the content under any of the other article ids;
"<a href='".$a->article_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a> ".
I know I'm fluffing it right here and am in a fight to connect with the other article ids by missing something crucial. Any other questions you need answered, please feel free to ask. Gotta bed it now...
UPDATE
#webcrazymaniac listed a solution that took me several readings to actually catch his intent to help push me into a better direction and holding position # the moment;
foreach ($article->result() as $a) {
echo "<a href='".base_url('#myModal/$a->art_id')."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a> ".
<?php } ?>
the above being the link that drops the modal into view. I'm now able to pull the 1st db result into all the modals of the page choices;
<!-- alert view -->
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<?php
$i = 0;
if (!$i = 0){
foreach (array_slice($article->result(), 0, 1) as $a) {
?>
<div class='modal-content' id='myModal<?php echo $a->art_id;?>'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h4 class='modal-title'><?php echo $a->title;?></h4>
</div>
<div class='modal-body'>
<h2><?php echo $a->description;?></h2>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
<?php
break;
}
}
?>
</div>
Using array_slice() was a way for me to limit how many results were pulled in from the links as I couldn't specify a limit without breaking the previous (private) definition for limit related to pagination (and I definitely didn't want to disturb that) within the model. My current modal function;
public function modal($art_id=NULL)
{
$this->db->select('*');
$this->db->from('tbl_article');
$this->db->where('tbl_article.art_id =', $art_id);
$result = $this->db->get();
return $result->result_array();
}
With only a hairsbreadth distance from my resolution, I'm a little to brain-squirrely to see the forest from the trees at this point and am staunchly convinced it's the most trivial of resolutions, but just cannot see it.
To summarize, your first issue
The exact issue I'm having is imposing a limit on the returned results
of the foreach() loop. If I use something like $i=0; if($i==1) break;
before the foreach(), I get the same content article_id result.
I believe u need to limit the number of rows displayed in view? if yes, you need to do the checking inside foreach loop (U have put this before the braces starts :) ) as below:-
<?php
$i=0;
foreach ($article->result() as $a) {
if($i==1) break;
?>
<button type='button' class='close' data-dismiss='modal'>×</button>
Moreover if you want to get only the first row, go for
foreach ($article->row() as $a) {
Edited Lines Below >>>>>>>>>
Hi, #HomeOffice I have modified the view code as below :-
<?php
$i = 0;
foreach ($article->result() as $a) {
echo $i."<br>";
if( $i == 1 ) break;
?>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
</div>
<?php
$i++;
}
die();
?>
Print the value of "i".
Removed some unnecessary div.
Put a die() at the end.
Let me know what is your output? ..
Also let me have you tried this with $article->row() ?
You should use an id for each element in your table. Then call that id in your button:
<a href='#modalItem<?php echo $a->id;?>' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a>
That should do it, although my answer could be more complete, but I get the feeling you haven't posted all you should have posted. More precise, I can't get it how you build the list of articles behind the modal window.
UPDATE:
If I understand this right, this is the button that toggles the modal element:
<a href='".$a->article_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a>
If so, you must add the 'id'(#) simbol in the href:
<a href='#articleModal".$a->article_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal'>View</a>
(not sure what triggers your modal window, if it's data-target='#myModal', it's here where you must make the modification: #myModal".$a->article_id.")
This tells the browser you have an unique id for each modal window, that corresponds to each article. And the result would be a link to #articleModal[x], on the same page.
Only at this point, you build only one modal, (with several articles inside when you started, and one article now). That's because you use foreach iteration inside the modal element, instead of using it to build a different modal window, with a different id, for each article.
What you need to do is something like this:
<?php
foreach ($article->result() as $a){
?>
<div class='modal-content' id='articleModal<?php echo $a->article_id;?>'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>×</button>
<h1 class='modal-title'><?php echo $a->title; ?></h1>
</div>
<div class='modal-body'>
<h4><?php echo $a->category_name; ?></h4>
<h4><?php echo $a->public_date; ?></h4>
<h4><?php echo $a->description; ?></h4>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
<?php } ?>
, or something like this.
The idea is to have a unique modal window, with it's unique id for each article, uniquely called with the corresponding button.
In all actuality - according to the phrasing of my question - I've answered it already;
<?php
foreach (array_slice($article->result(), 0, 1) as $a) {
?>
using array_slice I was able to achieve the limitation of results being pulled into the modal. The problem of not being able to return the matching article content by id is outside the scope of the original question and requires its' own separate focus. Thanks to #manu joseph and #webcrazymaniac, respectively, for their efforts on this issue.
The source of html http://bootsnipp.com/snippets/featured/simple-carousel
And Here is my code to display thumbnail 6 items per page carousel within php for loop.
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$arr = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
?>
<?php
echo "<div class='item active'>";
echo "<div class='row'>";
foreach($arr as $key=>$value)
{
//if we can divide $key by six without remainder
if ($key % 6 == 0)
{
echo "</div>";
echo "</div>";
echo "<div class='item'>";
echo "<div class='row'>";
}
echo "<div class='col-md-2'>";
echo '<img src="images/img'.$value.'.jpg" alt="Image" style="max-width:100%;">';
echo "</div>";
}
echo "</div>";
echo "</div>";?>
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
why the first 6 items not appear, but 6 items second page come appear.
what do I missed?
Thanks
if ($key % 6 == 0 AND $key!=0)
There is no issues n items in jQuery Carousel but you can give display limitation by css.
Please refer this link you can get more idea.
http://sorgalla.com/jcarousel/docs/reference/installation.html
I created a custom cms for a website and trying to make the nivo slider work with my db but im having issues with my while loop.
im only storing the name of the image in the db and the image itself its in a folder, images are working somewhat but they appear on above the other the the actual slideshow is broken.
my guess is that the title id is breaking it but not sure on how to go from here. any help is appreciated
here is my code:
<div id='slider' class='nivoSlider'>
<?php
$sql = 'SELECT * FROM slider';
$result = $db->query($sql) or die(mysqli_error());
while($row = $result->fetch_assoc()){
$slideshow = $row['slider_id'];
print"
<img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
</div>
<div id='htmlcaption' class='nivo-html-caption '>
<span>".$row['title'] . "</span>
</div> ";
}
?>
<div id='preloader'></div>
</div>
while($row = $result->fetch_assoc()){
$slideshow = $row['slider_id'];
print"
<img src='images/slider/".$row['image'].".jpg' alt='' title'#htmlcaption'>
</div> // ---------------> Here you are closing div slider
<div id='htmlcaption' class='nivo-html-caption '>// ----> Error
<span>".$row['title'] . "</span>
</div> ";
}
In while loop you are closing </div> without opening it,This cause broken slide show.In HTML syntax id's must be unique. So <div id='htmlcaption' class='nivo-html-caption '> so change this part.
[Update]
change print to
print" <div class='some_wraper'>
<img src='images/slider/".$row['image'].".jpg' alt='' title='#htmlcaption'>
</div> // ---------------> Here now you are closing div some_wraper
<div class='nivo-html-caption htmlcaption'>// ----> added new class htmlcaption
<span>".$row['title'] . "</span>
</div> ";
Update
Fixed code
<div id='slider' class='nivoSlider'>
<?php
$sql = 'SELECT * FROM slider';
$result = $db->query($sql) or die(mysqli_error());
for($i = 0;$row = $result->fetch_assoc();$i++){
$slideshow = $row['slider_id'];
echo "<img src='images/slider/".$row['image'].".jpg' alt='' title='htmlcaption_$i'>";
$tiles[$i]=$row['title'];
}
?>
</div>
<?php //caption divs for slider
for($i=0;$i<count($tiles);$i++) {
echo "<div id='htmlcaption_$i' class='nivo-html-caption '>";
echo "<span>".$tiles[$i]."</span> </div>";
}
?>
<div id='preloader'></div>
</div>