I am working in an Angular4 application,In this I have a carousel were I show the products and product name and price .Currently I have 6 products (3+3).I have 2 buttons if I clicked on left carousel will show 3 products from left side for right button will show 3 products from right ride.
The problem is when I add a new product carousel generate a new row instead showing like in the line of products.
How to resolve is .
HTML
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>iPhone</span>
<br>
<br>
3433 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname>Indian Spices</span>
<br>
<br>
747 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In stackblitz, there's no button to add a new product. Either you are adding the new product manually or the code is missed from the solution.
If adding manually, possibly you are adding it as a new row instead of another column. Since you are using bootstrap layout, your code divides the screen area in 12 parts, and each image is using 4 parts (sm-12, sm-4 respectively). Now when you add another product, that creates a new row since there's no space remaining in the current row.
To fix this out, rather than giving part by part allocation, give a fixed size to each product card, and then let the whole scroll horizontally.
Or, create another sm-12 row (3rd carousal) and add elements to it. You will be required to create a component hosting 3 products and each left/right button will cycle in the main carousal. Any product addition will go in the empty component and once filled, will create another instance to host the product.
--- pseudo code below, customize with actual values ----
#Component( {} }
export class ProductsContainerComponent {
products: Product[]
// template shows 3 products
}
#Component()
export class ProductCarousalComponent {
carousal: ProductsContainerComponent[]
btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed
addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
{ container = new ProductsContainerComponent(); carousal.push (container); }
// construct your new product here (url, images, text etc)
container.products.push (new Product() );
}
Related
I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.
I have tried several examples but nothing seems to be working. The typescript code doesn't work as intended in Vue.js as no implementation online uses ts. The modification is necessary as bootstrap works only with one item at a time. The idea is to create several wrap items and each one being displayed at a time.
I wanna just show 3 items (like the attached image) in my app. My code uses a lifecycle handler which is supposed to get the "card" elements onUpdated and create several "carousel" wrap items. Each wrap item will include 3 "card" elements but each card element will be different according to the displaying queue. E.g Wrap [1] - { 1,2,3} , Wrap [2] - {2,3,4} , Wrap [3] - {3,4,5}, Wrap [4] - { 4,5,1}, Wrap [5] - {5,1,2}
The following image is an inspection of a code found online [1]: https://i.stack.imgur.com/cCI2q.png
The following code is my implementation:
This is my representation however the buttons don't work properly https://i.stack.imgur.com/3Tx0R.png
<template>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 1</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 2</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 3</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 4</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 5</h5>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { onUpdated } from 'vue'
onUpdated(() => {
let carouselItems = document.querySelectorAll('.carousel .carousel-item')
carouselItems.forEach(el => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
next = carouselItems[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.firstChild!)
next = next.nextElementSibling
}
})
})
</script>
[1]: https://i.stack.imgur.com/3Tx0R.png
I am trying to add a script for the search filter and having an error in implementing it. Please let me know where I am wrong
I have added the search bar using the code
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
and after that I added the script inside the body tag
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable h4").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You need to show something higher than what you are currently finding.
You cannot hide the cards and then try to show the H4 inside the card.
Access $("#myTable .card") instead
Also you abuse a side effect of filter - Either filter on content or toggle on content
If the wrapping div is not hidden, you will get a scattering. So now I toggle the hidden wrapper instead
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#myTable .card").each(function() {
$(this).parent().toggle(
$.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
)
});
});
});
#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You are toggling the h4 instead of the .card that contains it.
You also do not need to toggle while filtering. Filter the ones you want and show them in one go. If you want to go one-by-one then use the .each instead of the .filter
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
var allCards = $('#myTable .card');
allCards
.hide() // hide all cards
.filter(function() { // filter the cards that match
var h4text = $(this).find('h4').text().toLowerCase();
return h4text.indexOf(value) > -1;
}).show() // show the filtered cards
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
hello guys is there any way to add additional div on ng-repeat.
<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
</div>
i want to add <div class="clearfix"> everythime its loop 2 times
like this
<div class="row">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-repeat="service in services">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
<div ng-if="$index % 2 == 0">
<div class="clearfix"></div>
</div>
</div>
so to sum it up after loop 2 times just under closed div for cols it will add a new div class clearfix. is it possible?
Your ng-if is outside the ng-repeat. Update based on your comment, add another div that will wrap the clearfix div and service div.
<div class="row">
<div ng-repeat="service in services">
<div class=" thumbnail-services col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<figure class="figure">
<img src="http://placehold.it/350x350" class="figure-img img-fluid rounded" alt="{{service.name}}">
<figcaption class="figure-caption">
<h3>{{service.name}} <span> {{service.age}}</span></h3>
</figcaption>
</figure>
</div>
<div ng-if="$index % 2 == 0">
<div class="clearfix"></div>
</div>
</div>
</div>
I'm trying to use modals with cards in Semantic UI. The concept is to click on the button on the card and display a modal with an image and description. I have 48 cards and I need different images with an every click on the card --> When I click on the card nr 1 - it shows the image number1, when I click on the card number2- it shows the image number 2, when I click on the card number 48- it shows the image nr 48 etc.
How can I get automatically each image from the card?
I'm a quite beginner with this stuff and I'm wondering if there is possible to use .append() with .each() in that case? Like this:
<script>
$(function(){
$('.ui.modal > .image').append($('.dimage')); //it adds only one image, but maybe there's a way to adds other ones using this script with minor modifications
});
</script>
This is excerpt from my code:
<!--head-->
<script>
$(function(){
$('.center > .ui.inverted.button').click(function(){
$('.ui.modal').modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack10.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack11.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img class="dimage" src="images/snacks/snack12.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
</div><!--ui four doubling special cards-->
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on the left
</div>
<div class="description">
A description can appear on the right
</div>
</div>
</div>
</div><!--ui basic container-->
Try the code below: https://jsfiddle.net/y7nd7qxw/. I had to adjust your card HTML a bit because the button wasn't showing up, but with the CSS you probably have it should be fine how you had it. Basically what I'm doing is storing the modal information on the data- attributes of your button. Then I'm getting those values in the click event and assigning them to the elements in the modal.
<!--head-->
<script>
$(function() {
var modal = $('#my-modal'), // hold reference to modal
modalImg = $('#modal-img'), // hold reference to image in modal
modalDesc = $('#modal-desc'); // hold reference to description in modal
//give your button an easier class reference
$('.show-modal').on('click', function() {
var button = $(this);
modalImg.attr('src', button.data('img'));
modalDesc.text(button.data('desc'));
modal.modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="here is some description" data-img="http://placehold.it/200">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="some other description description" data-img="http://placehold.it/400">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
</div>
<!--ui four doubling special cards-->
<div class="ui modal" id="my-modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
<img src="" alt="" id="modal-img">
</div>
<div class="description">
<p id="modal-desc"></p>
</div>
</div>
</div>
</div>
<!--ui basic container-->