load images from database into Bootstrap carousel - javascript

I am a beginner to asp.net mvc. I currently have an app with crud functionality. The user is able save images into the database (the user inserts the image into the database using a string url in the create view).
What I would like to do is use a bootstrap carousel (in the index view/a separate controller to crud controller) that displays images stored in the database,that have been inputted by the user. Therefore if the user changes the image the carousel that displays that image will also change to the new image.
Currently, this is what I have so far in my index view:
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
#foreach (var item in Model) {
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
}
</div>
</div>
<!-- Left and right controls -->
<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>
The result:
You are unable to navigate from one image to another, instead
The images are placed one after another, like a stack, one image on top of another.
e.g.
Image1
Image2
Image3
as appose to:
Image1 displayed, click navigation button in the carousel and navigate to image2 etc.
How do I solve this?
Really appreciate your time and effort, thanks
EDITED-Trying to add links to the carousel images, but doesn't work:
<div id="myCarousel" class="carousel slide " style="width:400px; height: 400px; margin:0 auto" 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"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<a href="#Url.Action("Details", "Desserts", new {Id=item.Id })">
<img src="#Url.Content(item.DessertArtUrl)" alt="Dessert">
</div>
}
}
</div>
<!-- Left and right controls -->
<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>

You are binding each Image in single div with class "item active" which is not valid try below code hope it helps.
#{int i = 0;}
#foreach (var item in Model) {
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
</div>
}
Let me UPDATE your whole code you have posted here please find below
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model) {
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.DessertArtUrl)" alt="Chania">
</div>
}
</div>
<!-- Left and right controls -->
<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>
Updated
<a href="#Url.Action("Details", "Desserts", new {Id=item.Id })">
<img src="#Url.Content(item.DessertArtUrl)" alt="Dessert">
</a>

Related

Bootstrap carousel 2 items per slide javascript for loop

I have an array; that looks like this:
array = [
{
id:1,
metadata:['object','object']
},
{
id:2,
metadata:['object','object']
},
{
id:3,
metadata:['object','object']
}]
this is what I'm doing:
array.forEach(function(elem){
output_info +=`<div class="col-md-12">
<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"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">`
elem.metadata.forEach(function(trip){
output_info += each_metadata_html(trip)
})
output_info += `</div>
<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>`
})
console.log("this is output", output_info)
$('#results').html(output_info) then I throw this inside my results tab.
Which looks like this
<div class="row" id="results"></div>
each_devices_html takes in an metadata object.
function each_metadata_html(elem){
return `<div class="item">
<p>`+elem.name+` </p>
</div>`
}
Problem:
The code doesn't display carousel; but instead it looks like this:
the element looks like this
everything is stacked together..
What I'm trying to do is; with the given array above:
I want to be able to. In this case I'd like to be able to display 3 different carousel in one page; then caraousel having 2 metadata per slides.

Clicking on thumbnail images need to display the slider images using jquery

I am having thumbnail images on my gallery page whenever user clicks on the thumbnail images it should display the slider images which should be slided automatically.I have tried with some examples posted in google but it didn't work .Here is my code.
Here is my fiddle link
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="image1">
<img src="images/image01.jpg" class="img-responsive">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/Image30.jpg" alt="First Slide">
</div>
<div class="item">
<img class="second-slide" src="images/Image14.jpg" alt="second Slide">
</div>
</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>
</div>
</div>
<div class="image2">
<img src="images/image13.jpg" class="img-responsive">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="third-slide" src="images/Image29.jpg" alt="third Slide">
</div>
<div class="item">
<img class="third-slide" src="images/Image32.jpg" alt="third Slide">
</div>
</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>
</div>
</div>
In jsfiddle i have added some sample images for clarification

showing hidden content based on which slide is active of a carousel

i want to show hidden content based off of which carousel item is active. Even if you tell me how to return just the active class element id would help alot.
Accordingly to documentation you have some events to capture carousel slide http://getbootstrap.com/javascript/#carousel-events
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
You can place this following script inside that event...
var liActive = $('#carousel-example-generic').find('ol').find('li.active')[0];
console.log("li element:", liActive);
var slideActive = $(liActive).data('slide-to');
console.log('data-slide-to active:', slideActive);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

How to implement slider in modal box?

I am trying to implement slider inside the modal box but this is not working.
I am using modal box and trying to implement slider inside the modal box.
Here is my code:
$("#lightSlider").lightSlider({
auto:false,
adaptiveHeight: false,
});
Slider is coming only then I do inspect from browser and modal box keeps changing its size during inspect element.
Any idea why this is happening or do I need to change my slider?
Just use a carousal slider inside your modal body
<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"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol><div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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 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>

I am unable to implement a proper bootstrap carousel in meteor

I am making a meteor based application in which I want to add a bootstrap carousel.I've added only twitter-bootstrap package.And these are the errors in the console Please help me out in fixing that. Here's my html code:
<template name="images">
<div class="row">
<div class="col-md-6">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{{#each images}}
<div class="item {{#if #first}}active{{/if}}">
<img class="carousel-img" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="carousel-caption">
Image caption
</div>
</div> <!-- / carousel item -->
{{/each}}
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- / carousel -->
</div>
</template>
And here's my javascript code:
Images = new Mongo.Collection("images");
if (Meteor.isClient) {
Template.images.helpers({images:Images.find()});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
if (Images.find().count() == 0){
for (i=1; i<8; i++){
Images.insert({
img_src:"img_"+i+".jpg",
img_alt:"img"+1
});
}
console.log("startup code says"+Images.find().count());
}
});
}

Categories