I have added the bootstrap carousel in which the div item is created in the for loop shown below. I have 9 small image in each item div which is dynamically getting populated. Now on carousel play i see the div item changes with change of active class but what i see is first div item content is also visible when the second item div is active similarly when 3rd item div gets active 1st and 2nd div items are visible too. Also the data-pause="hover" is not working.
<div class="col-md-4 col-md-offset-4">
<div id="custCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#custCarousel" data-slide-to="0" class="active"></li>
<li data-target="#custCarousel" data-slide-to="1"></li>
<li data-target="#custCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$counttoken = 9;
$loop = round($arrloop/9);
$k=0;
for($j=0;$j<$loop;$j++)
{
if($k==0){$act='active';}else{$act ='';}
echo '<div class="item '.$act.'">';
for($i=0; $i<$counttoken;$i++)
{
$img = $data[$rand_keys[$i]];
echo "<img src=".$img[2]." alt=".$img[0]." width='100' />";
}
$counttoken = $counttoken + 9;
$k++;
echo '</div>';
}
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#custCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#custCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Sorry, it was my bad i made an error in my php code to update the for loop. Here below is the updated code and it's working perfect now.
<?php
$counttoken = 9;
$loop = round($arrloop/9);
$k=0;
$l=0
for($j=0;$j<$loop;$j++)
{
if($k==0){$act='active';}else{$act ='';}
echo '<div class="item '.$act.'">';
for($i=$l; $i<$counttoken;$i++)
{
$img = $data[$rand_keys[$i]];
echo "<img src=".$img[2]." alt=".$img[0]." width='100' />";
}
$l = $l+9;
$counttoken = $counttoken + 9;
$k++;
echo '</div>';
}
?>
Related
I have a carousel with 4 items, they should appear in this order: AABB.
which means "active item mission" should be shown 2 times, same as "item mission".
My question is how does the if($i ??? function look in this case, as if($i == 1) is obviously not correct.
Thank you!
<section id="mission" class="mission"><h1>Our Mission</h1>
<div class="target" >
<div class="carousel slide carousel-fade" id="carousel3" data-ride="carousel">
<div class="carousel-inner">
<?php
$i=1;
$the_query = new WP_Query(array(
‘category_name’ => ‘Cars’,
‘posts_per_page’ => 4,
'tag' => 'mission'
));
while ( $the_query->have_posts() ) :$the_query->the_post();if($i == 1){ ?>
<div class="active item mission">
<h2 class="b"><?php the_title();?></h2>
<h4 class="b"><?php the_content();?></h4>
</div>
<?php }
else { ?>
<div class="item mission">
<h2><?php the_title();?></h2>
<h4><?php the_content();?></h4>
</div>
<?php } $i++; endwhile; wp_reset_postdata();?>
</div>
</div>
</div>
<a class="left carousel-control" href="mission #carousel3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-menu-left"></span>
</a>
<a class="right carousel-control" href="mission #carousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-menu-right"></span>
</a>
<ol class="carousel-indicators">
<li data-target="mission #carousel3" data-slide-to="0" class="active"></li>
<li data-target="mission #carousel3" data-slide-to="1"></li>
<li data-target="mission #carousel3" data-slide-to="2"></li>
</ol>
</section><!--#mission -->
The variable $i is just a value that will be increment of 1 on the while loop.
The $i var is initialize with
$i = 1;
In the loop, the first element to pass, $i will have $i = 1, meaning that it's this first element. At the end of the loop iteration, $i++; is used to add 1 to $i.
For the second element $i = 2.
In your code, $i is just use to detect the first element of the results and apply a different structure. In any case this value could be print two times.
You need to find another conditions
You can do it with a condition that will detect if $i is odd or even,
if($i % 2 == 0)
Hope it helps
I have a carousel created from images in a page template. For each page, the template will try to loop through a for and print out the images as needed.
The problem I'm facing is I need a few sections:
1) If more than 1 item returned, print this or
2) Just once print this item.
My code:
<?php
//Check for slider
$slideCheck = get_post_meta($post->ID, 'slide1', $single = true);
// if there's a slide
if($slideCheck){ ?>
<section id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php
$max_slides = 10;
for ($i=1; $i<=$max_slides; $i++){
$key = 'slide' . $i;
$slide = get_post_meta($post->ID, $key, $single = true);
$slide_text = get_post_meta($post->ID, $key . '_label', $single = true);
if($slide){
$class = ($key == 'slide1') ? 'active' : '';
?>
<div class="item <?php echo $class; ?>">
<img src="<?php echo $slide; ?>" class="slider-images" />
<div class="carousel-caption">
<h2><?php if($slide_text) { echo $slide_text; } ?></h2>
</div>
</div>
<?php } // end if
} // end for
?>
</div>
<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>
</section>
<?php } // end if
?>
The parts as follows:
1) It grabs the post meta to see if there are slides attached to the post
2) If true, it starts the slide block
3) I need the <section> portion to print once if #2 is true
4) However, I need the next <ol> section to only print if there are more than 1 slides
5) The <div class="carousel-inner"> prints once if #2 is true
6) Then the for loop to print the items
7) Following that is a </div> that closes the carousel-inner from #5
8) The following <a> code I need to print like the <ol> above, only if there are more than 1 slides.
I got it all working, however I know there has to be a cleaner way to do this. Here is my attempt:
if($slideCheck){ ?>
<section id="myCarousel" class="carousel slide" data-ride="carousel">
<?php
$max_slides = 10;
for ($i=1; $i<=$max_slides; $i++){
$key = 'slide' . $i;
$slide = get_post_meta($post->ID, $key, $single = true);
$slide_text = get_post_meta($post->ID, $key . '_label', $single = true);
if($slide){
$class = ($key == 'slide1') ? 'active' : '';
if($i>1){
?>
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<?php } //endif $1>1
if($i=1){
?>
<div class="carousel-inner">
<?php } //endif $i=1
?>
<div class="item <?php echo $class; ?>">
<img src="<?php echo $slide; ?>" class="slider-images" />
<div class="carousel-caption">
<h2><?php if($slide_text) { echo $slide_text; } ?></h2>
</div>
</div>
<?php } //endif $1>1
if($i=1){
?>
</div>
<?php } //endif $i=1
if($i=2){
?>
<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>
<?php } // endif
} // end if
} // end for
?>
</section>
<?php } // end if
?>
As you can see, it seems very convoluted with a bunch of if($i>1) etc. There has to be a cleaner method and a better way to write this.
This code is cleaner, and more adaptable.
<?php
// Set up an empty array to hold all of the slides
$slideCheck = array();
// We can only have 10 slides. Change this number to allow for more or less.
$max_slides = 10;
// Loop through and get all the slides.
for( $i = 0; $i <= $max_slides; $i++ ) {
// Set up the key
$key = 'slide' . $i;
// Get the slide url
$url = get_post_meta($post->ID, $key, $single = true);
// Get the slide text
$text = get_post_meta($post->ID, $key . '_label', $single = true);
// Check to make sure we at least have one of the values
if( ! empty( $url ) || ! empty( $text ) ) {
// If we do, add them to our array
$slideCheck[] = array(
'url' => $url,
'text' => $text
);
}
}
// If we have one or more slides
if( ! empty( $slideCheck ) ) { ?>
<section id="myCarousel" class="carousel slide" data-ride="carousel">
<?php if( sizeof( $slideCheck ) > 1 ) { // Here we are checking if we have more than one slide. ?>
<ol class="carousel-indicators">
<?php for( $i = 0; $i < sizeof( $slideCheck ); $i++ ) { // Make this section dynamic, as we don't know how many slides we'll actually have ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php echo $i == 1 ? 'active' : ''; ?>"></li>
<?php } ?>
</ol>
<?php } ?>
<div class="carousel-inner">
<?php
foreach( $slideCheck as $key => $slide ) {
// Some check to see if we are on the second slide, per your old code??? Not sure what it does.
$class = ($key == 1 ) ? 'active' : '';
?>
<div class="item <?php echo $class; ?>">
<?php if( ! empty( $slide['url'] ) ) { ?>
<img src="<?php echo $slide['url']; ?>" class="slider-images" />
<?php } if( ! empty( $slide['text'] ) ) { ?>
<div class="carousel-caption">
<h2><?php echo $slide['text']; ?></h2>
</div>
<?php } ?>
</div>
<?php } // end foreach ?>
</div>
<?php if( sizeof( $slideCheck ) > 1 ) { // Again, if we have more than one slide... ?>
<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>
<?php } ?>
</section>
<?php } // end if ?>
Creating an array of ALL of your slides FIRST allows a few things:
First, it allows you to know do a check on the sizeof() the array. If it's greater than 1, you have more than 1 slide.
Second, I'm not sure how the end user is populating these "slides", but it seems if they have 10 fields (based on your max number), they could enter info into the first slide fields, skip the second fields, enter information into the third fields, and so forth. Again, not sure how you have it set up, but this array method will thwart that mistake by only putting "slides" that have any values in their inputs, into the array.
I took the liberty to make your OL dynamic as well... as I figured it would grow or shrink based on the number of slides. Not sure if that's your intent, but it seemed that way to me. The only thing I didn't understand is why you are setting the second slide to be the "active" one.
<img src="../AbaamAdmin/Released_Movies/<?php echo $row['rel_movies_pics'];?>" style="width:330px;height:300px;" >
When I click the above link I need to get the data-id value, and I need to fetch images from database using this value and need to create a image slideshow. The bootstrap modal poopup code is also in the same page. The below is my popup code.
<div class="modal fade and carousel slide" id="lightbox">
<div class="modal-dialog" style="margin-top:250px;vertical-align:middle;" >
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<?php
$id=$_SESSION['relid'];
//$i=0;
$qry="select rel_movies from released_movies where rel_id='$id' ";
$qryr=$con->query($qry);
while($rr=$qryr->fetch_assoc())
{
$film=$rr['rel_movies'];
$q="select * from gallery where category='$film'";
$qr=$con->query($q);
while($r=$qr->fetch_assoc())
{
$rows[] = $r;
}
?>
<ol class="carousel-indicators">
<?php
$i = 1; //Counter
foreach ($rows as $r): //Foreach
$ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
?>
<!--Here I add the counter to data-slide attribute and add class to indicator-->
<li data-target="#lightbox" data-slide-to="<?php echo $i;?>" class="<?php echo $ol_class; ?>"></li>
<?php $i++; ?>
<?php endforeach; ?> <!--Close Foreach-->
</ol>
<?php
$i = 1; //Counter
foreach ($rows as $r): //Foreach
$item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
?>
<div class="<?php echo $item_class; ?>"> <!-- Define Active Class Here-->
<img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
</div>
<?php $i++; ?>
<?php endforeach; ?> <!-- Close Foreach-->
</div> <!-- /.item active-->
<a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<?php }?>
</div> <!-- /.carousel-inner -->
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
In place of $id=$_SESSION['relid']; I need to get the value from data-id. How this is possible. Thanks in advance.
I am trying to display videos as a slideshow inside bootstrap modal dynamically. But when videos are loaded, the corresponding play button functions as carousel left indicator. And also the video is auto-playing. I also tried using tag, which stops the auto-play, but still the play button functioning as carousel left indicator. Thanks in advance.
Below is my code.
<div class="modal fade and carousel slide" id="video">
<div class="modal-dialog" style="margin-top:250px;" >
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<?php
$id=$_GET['id'];
//$i=0;
$qryr="select * from released_movies where rel_id='$id' ";
$qryrr=$con->query($qryr);
while($rrr=$qryrr->fetch_assoc()){
$film=$rrr['rel_movies'];
$qq="select * from events where film='$film'";
$qrr=$con->query($qq);
while($roo=$qrr->fetch_assoc()){
$rowss[] = $roo;
}
?>
<ol class="carousel-indicators">
<?php
$i = 1; //Counter
foreach ($rowss as $roo): //Foreach
$ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
?>
<!--Here I add the counter to data-slide attribute and add class to indicator-->
<li data-target="#video" data-slide-to="<?php echo $i;?>" class="<?php echo $ol_class; ?>"></li>
<?php $i++; ?>
<?php endforeach; ?> <!--Close Foreach-->
</ol>
<?php
$i = 1; //Counter
foreach ($rowss as $roo): //Foreach
$item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
?>
<div class="<?php echo $item_class; ?>"> <!-- Define Active Class Here-->
<iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen></iframe>
</div>
<?php $i++; ?>
<?php endforeach; ?> <!-- Close Foreach-->
</div> <!-- /.item active-->
<a class="left carousel-control" href="#video" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
</a>
<a class="right carousel-control" href="#video" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<!--<span class="glyphicons glyphicons-right-arrow"></span>-->
</a>
<?php } ?>
</div> <!-- /.carousel-inner -->
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
In your approach, some div elements, selectors are misplaced and one key div is missing, need some CSS changes required.
"carousel slide" in Modal HTML (Remove it)
<div class="carousel-inner"> is misplaced, it should come after <ol class="carousel-indicators"></ol>
Missing key carousel Element <div id="selector" class="carousel slide" data-ride="carousel"> Add it after modal-body
In Prev and Next button you are targeting href="#video" which is the id of Modal
In carousel indicators you are targeting data-target="#video" which is the id of Modal
CSS Changes required to fix the issue when clicking on Play / Stop button causing the video slide to next, Reason the Next / Previous button is overlapping the video control, following changes in CSS will fix the issue
.carousel-control {
bottom: 55px !important;
}
To stop the auto play, add autoplay=false in video iframe.
Final HTML will be
Note: I named the carousel selector id videobox
<div class="modal fade and" id="video">
<div class="modal-dialog" style="margin-top:250px;" >
<div class="modal-content">
<div class="modal-body">
<div id="videobox" class="carousel slide" data-ride="carousel">
<?php
$id=$_GET['id'];
//$i=0;
$qryr="select * from released_movies where rel_id='$id' ";
$qryrr=$con->query($qryr);
while($rrr=$qryrr->fetch_assoc()){
$film=$rrr['rel_movies'];
$qq="select * from events where film='$film'";
$qrr=$con->query($qq);
while($roo=$qrr->fetch_assoc()){
$rowss[] = $roo;
}
}
?>
<ol class="carousel-indicators">
<?php
$i = 1; //Counter
foreach ($rowss as $roo):
$ol_class = ($i == 1) ? 'active' : '';
?>
<li data-target="#videobox" data-slide-to="<?php echo $i;?>" class="<?php echo $ol_class; ?>"></li>
<?php $i++; ?>
<?php endforeach; ?>
</ol>
<div class="carousel-inner">
<?php
$i = 1; //Counter
foreach ($rowss as $roo):
$item_class = ($i == 1) ? 'item active' : 'item';
?>
<div class="<?php echo $item_class; ?>">
<iframe width="100%" height="500px" src="../AbaamAdmin/Events_Videos/<?php echo $roo['event_videos'];?>" frameborder="0" allowfullscreen autoplay="false"></iframe>
</div>
<?php $i++; ?>
<?php endforeach; ?>
</div> <!-- /.item active-->
<a class="left carousel-control" href="#videobox" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<!-- <span class="glyphicons glyphicons-left-arrow"></span>-->
</a>
<a class="right carousel-control" href="#videobox" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<!--<span class="glyphicons glyphicons-right-arrow"></span>-->
</a>
</div> <!-- /.carousel-inner -->
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Fiddle
geeks please help,
I have a problem with the usage of array keys with the while loop.
I'm trying to display the twitter bootstrap slider images by looping from the database with this code:
<div id="slider">
<!--Code for make home images slide show-->
<div id="myCarousel" class="carousel slide">
<!-- here comes the engine to run the sliders -->
<?php
$query = 'SELECT * FROM banners WHERE status = 1 ORDER BY id ASC';
?>
<div class="carousel-inner">
<?php
if ($r = mysql_query($query , $conn)) { //run the query
$row = mysql_fetch_array($r);
reset($row);
while (list($key, $value) = each($row)) {
if ($key == 0) { ?>
<div class="item active">
<img src="images/homeimages/<?php echo $value['image'];?>" alt="<?php echo $value['title'];?>">
<!-- <img src="images/homeimages/one.jpg" alt=""> -->
<div class="carousel-caption">
<!-- <h4>First Thumbnail label</h4> -->
<p><i><?php echo $value['title'];?></i></p>
</div>
</div>
<?php }else{ ?>
<div class="item">
<img src="images/homeimages/<?php echo $value['image'];?>" alt="<?php echo $value['title'];?>">
<!-- <img src="images/homeimages/one.jpg" alt=""> -->
<div class="carousel-caption">
<!-- <h4>First Thumbnail label</h4> -->
<p><i><?php echo $value['title'];?></i></p>
</div>
</div>
<?php }
}
}else {
print '<p style="color: red;">Could not retrieve the slider:<br />' . mysql_error($dbc) . '.</p>';
} ?>
</div>
<!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> -->
<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>
</div>
</div><!-- endof slider -->`
.
as`it's well known the first slider image of twitter bootstrap must have the class of active to make sure it loads faster. I need to pick the first slider image from an array and add the class of active into it while the rest of the slider images remains the same without an active class.
can someone please tell me where i'm messing up with my codes?
Try this:
<div class="carousel-inner">
<?php
if ($r = mysql_query($query , $conn)) {
$count = 0;
while ($row = mysql_fetch_array($r){
if ($count == 0){?>
<div class="item active">
<?php}
else { ?>
<div class="item">
<?php}?>
<img src="images/homeimages/<?php echo $row['image'];?>" alt="<?php echo $row['title'];?>">
<div class="carousel-caption">
<p><i><?php echo $row['title'];?></i></p>
</div>
</div>
<?php
}
$count ++;
}
}
else {
print '<p style="color: red;">Could not retrieve the slider:<br />' . mysql_error($dbc) . '.</p>';
}