dynamic image slider into dynamic cards in asp.net mvc c# - javascript

I want to display cards in my home page this cards content image slider.
ex: card contains Toyota cars information and slider for cars images.
another card to display BMW cars information and slider for cars images.
I already have the database and model and my code run perfectly with one card only when I enter two or more cards it doesn't work(the images appear only in the first card).
here is my code:
#foreach (var item in Model.BrokenCar)
{
<div class="col-md-4">
<div class="card mb-3">
<h3 class="card-header">#Html.DisplayFor(modelItem => item.Title)</h3>
<form id="form1">
<div class="carousel-inner">
<div id="container">
<p>#Html.DisplayFor(modelItem => item.DescriptionEn)</p>
<div id="banner-fade">
<ul class="bjqs">
#foreach (var image in Model.BrokenCarImage.Where(o => o.BrokenCarID.Equals(item.BrokenCarID)))
{
var base64 = Convert.ToBase64String(image.BrokenCarImg);
var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
<li>
<img src='#imgsrc' title='#Html.DisplayFor(modelItem => item.Title)' alt="">
</li>
}
</ul>
</div>
</div>
<script src="../assets/js/libs/jquery.secret-source.min.js"></script>
<script>
jQuery(function ($) {
$('.secret-source').secretSource({
includeTag: false
});
$('#banner-fade').bjqs({
height: 320,
width: 620,
responsive: true
});
});
</script>
</div>
</form>
<div class="card-body">
Card link
Another link
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
}

it works after I replaced the static id <div id="banner-fade"> with dynamic id <div id='#item.BrokenCarID'>
also updated it in the script $('##item.BrokenCarID')

Related

redering dynamic data from array of objects on an html page and want to flip the specific box. On front page i want to show image and heading

I am rendering dynamic data from array of objects on an html page. i want to flip the specific box. On front page i want to show image and heading while on the back page i want to show the paragraph. I am attaching the HTML and JavaScript file.
The HTML code
<div class="row rwOneOurservices ourServicesContainer" ></div>
JavaScript where I am rendering my data from an array of objects
const FnRenderOurService = () => {
if (ElourServicesContainer) {
ElourServicesContainer.innerHTML = "";
for (singleOurService of ourServices) {
ElourServicesContainer.innerHTML += `
<div class="col-sm-3 col-10 ourServiceElement" onclick="FnShowService('${singleOurService.id}')" id="${singleOurService.id}">
<div class="row">
<div class="col-md-4 col-12">
<img
src="${singleOurService.serviceImg}"
alt=""
/>
</div>
<div class="col-md-8 col-12">
<h5>${singleOurService.serviceName}</h5>
</div>
</div>
<div class="row">
<div class="col-12">
<p>
${singleOurService.serviceShortDesc}
</p>
</div>
</div>
</div>
`;
}
}
};
How to apply flip on every grid separately (might be on the basis of 'Id')?

Have multiple elements under different divs disappear on hover

I have 2 grid divs, one with images and the other with a list of names. Each element within each of the divs corresponds to another within the other div (eg. .image-1 corresponds with .name-1).
When you hover over one of the elements, I want that element AND the corresponding element in the other div to both disappear.
For example, when you hover over "Name 1", I want that and the corresponding image to both disappear. Here's my general html setup:
<body>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1">
<img src="images/image1.png" />
</div>
<div class="grid-box image-2">
<img src="images/image2.png" />
</div>
<div class="grid-box image-3">
<img src="images/image3.png" />
</div>
<div class="grid-box image-4">
<img src="images/image4.png" />
</div>
<div class="grid-box image-5">
<img src="images/image5.png" />
</div>
</div>
<div class="names-grid grid">
<div class="grid-box name-1">Name 1</div>
<div class="grid-box name-2">Name 2</div>
<div class="grid-box name-3">Name 3</div>
<div class="grid-box name-4">Name 4</div>
<div class="grid-box name-5">Name 5</div>
</div>
</div>
</body>
I'm sorry, I've been stuck on this for hours and would love some help! Here's a fiddle:
https://jsfiddle.net/8egpf1j3/
One solution using JQuery is to add data-* attributes to the HTML markup. In this approach we going to add a data-target attribute that will hold the class of the related element that should be hidden (with opacity: 0) when the current element is hovered. You can use JQuery.data() to work with data-* attributes. Check the next simplified example, from where I hope you can understand the underlying idea.
$(".grid-box").hover(
// Handler for hover-in.
function()
{
$(this).css("opacity", 0);
$($(this).data("target")).css("opacity", 0);
},
// Handler for hover-out.
function()
{
$(this).css("opacity", 1);
$($(this).data("target")).css("opacity", 1);
}
);
.grid-box {
width: 100px;
background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1" data-target=".name-1">
IMAGE 1
</div>
<div class="grid-box image-2" data-target=".name-2">
IMAGE 2
</div>
<div class="grid-box image-3" data-target=".name-3">
IMAGE 3
</div>
<div class="grid-box image-4" data-target=".name-4">
IMAGE 4
</div>
</div>
<hr>
<div class="names-grid grid">
<div class="grid-box name-1" data-target=".image-1">
Name 1
</div>
<div class="grid-box name-2" data-target=".image-2">
Name 2
</div>
<div class="grid-box name-3" data-target=".image-3">
Name 3
</div>
<div class="grid-box name-4" data-target=".image-4">
Name 4
</div>
</div>
</div>
You can do it this way, I suppose number of images and names is the same, and they are in the same order. Means image number one is first in its div, and name number one is first in its div.
//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a");
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");
//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
pictures[i].addEventListener("mouseenter", hide.bind(i));
names[i].addEventListener("mouseenter", hide.bind(i));
}
//run function on "hover" event, i = index of chosen image/name
function hide (){
var i = this;
pictures[i].style.opacity = 0;
names[i].style.opacity = 0;
}

Unable to filter data from database due to laravel blade curly braces "{{ }}"

I'm trying to filter data gotten from database with the class="data-groups".
Here is the code:
this.shuffle.filter(function(element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.book-item_title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="grid-shuffle">
<ul id="grid" class="row">
#foreach($libraries as $library)
<li class="book-item small-12 medium-6 columns" data-groups='["{{$library->genre}}"]' data-date-created='{{$library->published}}' data-title='{{ $library->title }}' data-color='{{$library->color}}'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('img/001-small.png')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">{{$library->title}}</h3>
<p class="author">{{$library->author}} • {{$library->published}}</p>
<p>{{$library->synopsis}}</p>
Details
</div>
<div class="overlay-details">
Close
<div class="overlay-image">
<img src="img/001.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">{{$library->title}}</h2>
<p class="author">by {{$library->author}}</p>
<p class="published">{{$library->published}}</p>
<p class="synopsis">{{ $library->synopsis }}</p>
Preview
</div>
<div class="overlay-preview">
Back
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>{{$library->details}}</p>
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
The problem is it doesn't work unless I hard code the genre like this
data-groups='["fiction"]'
Now since I'm retrieving data from a database using the foreach loop it means any book out the database is automatically given the "fiction" attribute regardless of its db assigned genre.
Any help on how to solve this will be appreciated.
Found the problem
I was Filtering with this lines of code
All Categories
Fantasy
Sci-Fi
Classics
Fairy Tale
The problem was that the data-group items are case sensitive. So for example I was filtering with "classic" while my database was providing "Classic" therefore making the filter function seem faulty.

How to get dimmer on specific card to toggle rather than all my card gallery using Semantic UI and JQuery

I have a gallery of avatars I want to show my user, which are shown in the card format of Semantic-UI. I want the user to click on one of the images which then triggers Semantic's dimmer to appear in that specific image's place.
What I currently get is that all the images get the dimmer to appear on them instead of the specific one I want. Here is the code that puts the dimmer on all images:
$(".selectavatar img").hover(function() {
$('.selectavatar img').removeClass('selectedImage');
$(this).toggleClass("selectedImage");
});
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
<!--gallery goes here-->
<div class="ui three column grid selectavatar">
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image1.jpg" class="hidden" />
<img name="user[image]" src = "image1.jpg" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image2.png" class="hidden" />
<img name="user[image]" src = "image2.png" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
The way I envisioned it was that I'll add the class .selectedImage on the image the user wants, then I would be able to toggle the dimmer if selectedImage exists. But when I do use that as so:
$(".selectavatar img.selectedImage").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
then nothing appears, no dimmer whatsoever!
What am I doing wrong?
As a side note, I need to figure out how to generate a gallery from a folder of images using EJS and NodeJS, instead of having to hard code each image. I guess the right thing to do would be a seperate question for that?
Your code will dim all .ui.dimmer divs when you click an image:
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
This code will dim only the .ui.dimmer div which is located in the same parent container as the clicked image:
$(".selectavatar img").click(function() {
$(this).parent().find(".ui.dimmer").dimmer("toggle");
});
Part 2
Your code will set a click handler on all img.selectedImage which exist when you set the event handlers. Unfortunately no images have the selectedImage class at that point so it doesn't work.
$(".selectavatar img.selectedImage").click(function() {
//code
});
This code will do the same, but it only requires .selectavatar to exist when the event handler is set up:
$(".selectavatar").on("click", "img.selectedImage", function() {
//code
});

Javascript foreach array key values, output to html

How do I loop thru array keys to output their values to HTML?
The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.
var img=[
'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
'aaaaaa','bbbbbb','cccccc','dddddd'
];
$( "#yin" ).click(function() {
var img = [0,2];
var details = [0,1];
$(step).each(function() {
document.getElementById("img").innerHTML();
});
$(imgs).each(function() {
document.getElementById("img").innerHTML();
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>
There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.
var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];
$( "#yin" ).click(function() {
var imgIndices = [0,2];
var detailIndices = [0,1];
$("#img").html("");
$("#details").html("");
$(imgIndices).each(function(i, o) {
$("#img").append("<img src=\"" + images[o] + "\"/>");
});
$(detailIndices).each(function(i, o) {
$("#details").append("<p>" + details[o] + "</p>");
});
});
<div class="container">
<ul class="row-fluid">
<li class="span4" id="yin">
<div class="row-fluid">
<img src="yin.jpg" />
<h3>Yin</h3>
</div>
</li>
<li class="span4" id="yang">
<div class="row-fluid">
<img src="yang.jpg" />
<h3>Yang</h3>
</div>
</li>
</ul>
<div class="row-fluid">
<div class="span12">
<div class="show-details details">
<div class="detail-content">
<div id="img">
<!-- Loop (for yin would be image01, and image03) -->
</div>
<div id="details">
<!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
</div>
</div>
</div>
</div>
</div>
</div>
I would take the click function out to a named function though and just pass in the arrays.

Categories