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-->
Related
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" 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=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
I've been trying to figure out why my modals won't show up anymore after I close them. I have to refresh the page every time if I want to see the info from the modals again.
When I first load the page and click on the first card it will show me the modal, but then no matter how many times I click the first card it won't load the modal anymore because it removes it from where I set it and moves it to a div with the following classes "ui dimmer modals page transition visible active". Any idea how I can keep my modals where they were in the DOM?
Below is my code:
HTML:
<div class="ui three stackable cards">
<div class="card">
<div class="image">
<img src="/Assets/img/products/tfplus.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor Plus
</div>
</div>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor Plus
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tfplus.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Zinc</li>
<li>Colostru bovin</li>
<li>Galbenus de ou</li>
<li>Cordyvant: complex de polizaharide cu o proprietate exclusiva - IP6 (acid fitic)</li>
<li>Extract de boabe de soia</li>
<li>Cordyceps sinensis</li>
<li>Beta-glucani</li>
<li>Extract de Agaricus blazeii</li>
<li>Extract de pulbere de Aloe Vera</li>
<li>Frunze de maslin</li>
<li>Ciupercile Maitake si Shiitake</li>
<li>Pulbere de coaja de lamaie</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor
</div>
</div>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Colostru bovin (300 mg in fiecare capsula)</li>
<li>Galbenus de ou</li>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.card').click(function() {
$(this).children('.ui.modal').modal({
blurring: true
}).modal('show');
});
Found a workaround by adding one extra class to the modal ('productx') and the same class to the card, where x is the product number. the HTML & JS for this looks as follows:
HTML:
<div class="card product2">
<div class="image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor
</div>
</div>
<div class="ui modal product2">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Colostru bovin (300 mg in fiecare capsula)</li>
<li>Galbenus de ou</li>
</div>
</div>
</div>
</div>
JS:
$('.card').click(function() {
$('.ui.modal.' + $(this).attr('class').split(' ')[1]).modal('show');
});
Basically I'm finding the clicked '.card' product class and using that to open the modal that has the same class in it's div, thus ensuring that the modal is opened every time no matter where it is in the DOM.
I am a beginner with WordPress.
I have a HTML/BOOTSTARP "One page" template which has a gallery built with Lightbox CSS/JS.
Refer the template link here.
I have integrated this theme to WordPress and everything works fine.
Now, I would like to upload pictures to this existing gallery using WordPress.
A post creation is giving me options to upload this as a new post.
I have 8 portfolios and would like to add several pictures to specific portfolios from WordPress so that it could be automatically uploaded.
Please be reminded that this is a One page website.
<section id="portfolio">
<link href="css/lightbox.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2>Our Gallery</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<h3>gallery</h3>
<p></p>
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!-- <h3>Time Hours</h3>
<p>Design, Photography</p>-->
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!--<h3>Time Hours</h3>
Code for the portfolio
Kindly help me with your suggestions on how to do it.
Firstly
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
<i class="fa fa-search-plus"></i>
has double slash "//" which leads to not finding the actual file.
Besides that, have you checked that Lightbox CSS and JavaScript file are loaded properly? See the console if there is any error.
Hey guys having a problem with masonry plugin.
I'm trying to load the simple layout using percentPosition: true; and the problem is when everything loads, layout loads without the gutter and adds it later which causes all images to shift and it looks quiet annoying.
cant seem to figure out the solution to load it the way that nothing would shift. Bellow is the code:
and here is the link: dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>
I'm trying to apply transitions as explained in here, but some cards fail to do a second transition/animation. Is it CSS, Semantic UI or me? You can try adding more cards to the test.
Edit:
As #niba requested, I made a jsfiddle to show what is
happening. Look that I named cards from "Card 0" to "Card 7". Run
several times and you may see some are missing.
Here is the code:
$(document)
.ready(function() {
$('.card')
.transition('fade')
.transition('fade', function() {
console.log('finished');
});
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="img/1.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/2.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/3.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
</div>