I created a carousel in html/js with a title, caption and an image. I'm trying to transfer it using php but no idea how. I created a table in my database "Test" named "Carousel" with 5 rows (id,Title,Caption,Image and a link) and i input data in the field but no idea on how to select it on php in a carousel form.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/aa1.jpg">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="../images/aa2.jpg">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption Caption<a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption. <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="list-group col-sm-4">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>Title</h4></li>
</ul>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- End Carousel -->
</div>
Is there a way i can transfer this to php/sql so i can update it easily?
I expect you want to add images to your carousel from a database correct? If so:
Save the location of the image (filepath) as a string in the database.
Use php to get all the filepaths in the database.
foreach filepath, echo out the div .item
For the carousel indicator circles, you can increase a number by 1 in every loop of the foreach, or use sql count. Though incrementing a number is probably easier.
If you wanted captions in all of them, just also get the caption from the table with the same Select query as getting the filepath
Guide:
<?php
$query = "SELECT captionTitle, captionContent, imageFilepath FROM carouselContent";
$result = mysqli_query($connection, $query);
$count = 0;
while($row = mysqli_fetch_assoc($result)){
$count++;
if($count === 1) echo "<div class='item active'";
else echo "<div class='item'";
echo "> Whatever else is in the item here";
When you get to adding the image tag:
echo "<img src='" . $row['imageFilepath'] . "' alt='carouselImage'>";
If you have indicator circles, use a
for($i = 1; $i <= $count; $i++){
echo "<carousel indicator code, replacing the carousel indicator slide target integer with $i";
//Note, this is for Bootstrap Carousels which are incredibly similar to your code
}
Related
I want to make a dynamic bootstrap carousel with image thumbnails at the bottom. I went through several code snippets and answers which seems to be working in their demo and experimented those codes. I just got the code in this link working but the thumbnail was too small. Here are the functions I wrote to make dynamic carousel...
//make image thumbnails
function make_image_previews ($con){
$output = '';
$count = 0;
$result = make_query($con); //returns the images in database
while($row = mysqli_fetch_array($result)){
if($count == 0){
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}else{
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}
$count = $count + 1;
}
return $output;
}
And here is the html output in page source
<div class="row">
<div class="col-md-12">
<div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
</div>
</div>
<a class="carousel-control-prev" href="#dynamic_slide_show" 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="#dynamic_slide_show" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Carousel image preview-->
<ol class="carousel-indicators">
<li data-target="#dynamic_slide_show" data-slide-to="0" class="active">
<img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="1">
<img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="2">
<img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
</li>
</ol>
</div>
</div>
</div>
<hr>
There was a question with the same problem but the code was different to what I have provided in the link at top. I tried the answer changing the code but I was able only to see the three underlines. How can I solve the problem of small thumbnails in my code?
EDIT
When I tried the CSS
.carousel-indicators {
position: static;
}
.carousel-indicators>li {
width: 100px
}
the thumbnail overflows onto the next row. As in following picture, horizontal line, (<hr> tag) is on the end of the row where the carousel is present
Here is an example jsfiddle: https://jsfiddle.net/setw7kn0/
You can set the images width by changing .carousel-indicators > li to whatever you want (in the example i have used 100px). Also the position: static; in .carousel-indicators is to make the thumbnails stop overlapping the carousel.
Tell me if this is what you were looking for.
EDIT:
Well the reason that .carousel-indicators is overlapping the hr it's because hr shouldn't be placed directly inside .row, instead should be either inside a column inside a row or after the .row closing tag.
Also i have changed the .carousel-indicators > li height to auto so that you override the defaults bootstrap css, the default value of bootstrap is height: 3px; (so you are actually fighting bootstrap).
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<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>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I'm having a silly problem with a slightly customised Bootstrap carousel when it has more than 10 slides. The slides in double figures are not registering when you click the thumbnails?
<div class="col-md-12" id="slider">
<div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<div class="desc">
<p>This is image 1</p>
</div>
<img src="slide-1.jpg" class="img-responsive"> </div>
<!-- ... 2,3, 4 and so on -->
<div class="item" data-slide-number="10">
<div class="desc">
<p>This is image 11</p>
</div>
<img src="slide-11.jpg" class="img-responsive"> </div>
</div>
<a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>
<!-- Thumbnails -->
<div class="thumbs hidden-sm hidden-xs">
<div class="width-auto" id="slider-thumbs">
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
<!-- ... 2,3, 4 and so on -->
<li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
</ul>
</div>
</div>
$(document).ready(function() {
$('#theGallery').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#theGallery').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#theGallery').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
});
Probably something really simple. Any help appreciated. Thanks in advance!
Add radix to parseInt:
id = parseInt(id, 10);
It seems quite challenging to add both the Bootstrap Carousel Slider and
Lightbox Gallery in a single page without significant issues.
Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel
Is it possible to add both modal lighbox and carousel slider to a single page without any issues?
To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Header Carousel -->
<header 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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">
<center>
<div class="carousel-title">
<h1>Certified General Contractor</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>For all your South Florida construction needs</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
<center>
<div class="carousel-title">
<h1>Commercial Contruction</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Build with a company you can trust</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">
<center>
<div class="carousel-title">
<h1>Home Renovation</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Remodel your home with the best in the field</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="font-size:70px;"></span>
</a>
JS:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.
You need to be more precise here:
$(".row .thumbnail").click(function(){
var content = $("#modal-carousel .carousel-inner");
Here's the updated fiddle: http://jsfiddle.net/2aasoyej/1/
Udated fiddle that properly disables the interval for the modal carousel, as noted in comments below: http://jsfiddle.net/2aasoyej/4/
My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-
slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-
slide-to="1"></li>
<li data-target="#carousel-example-generic" data-
slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.
<div class="item active">
<img src="http:\\placehold.it\32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\\placehold.it\42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\\placehold.it\52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
Fiddle