I am new to Bulma. I'm trying the carousel extension but it doesn't work. I have copied one example and I followed the documentation and did research but still it does not work. Thank you for helping! Heres my code:
<script type="text/javascript" src="https://wikiki.github.io/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js"></script>
<script>
$(document).ready(function(){
bulmaCarousel.attach();
});
</script>
First of all, You can't include scripts directly from Github.
Try using a CDN instead.
In order to integrate Bulma-Carousel to your project follow the steps below:
Link the CSS file of Bulma and the CSS and JS files of Bulma-Carousel.
Then, initialize Bulma-Carousel in a seperate .js file.
Here's a starter project to help you get started:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel#4.0.4/dist/css/bulma-carousel.min.css" />
<script defer src="https://cdn.jsdelivr.net/npm/bulma-carousel#4.0.4/dist/js/bulma-carousel.min.js"></script>
<script defer src="scripts.js"></script>
</head>
<body>
<section class="section">
<div class="container is-clipped">
<div id="slider">
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550921082-c282cdc432d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 1
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550945771-515f118cef86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 2
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550971264-3f7e4a7bb349?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 3
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550931937-2dfd45a40da0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 4
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550930516-af8b8cc4f871?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 5
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image video-container is-16by9">
<iframe type="text/html" src="https://www.youtube.com/embed/H0v773vKS_U" frameborder="0"></iframe>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 6
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
scripts.js
bulmaCarousel.attach('#slider', {
slidesToScroll: 1,
slidesToShow: 3,
infinite: true,
});
Related
I'm currently developing a website with bootstrap and I'm trying to build a function to show and hide a text whenever I click on a thumbnail, without the need to load another page.
It would be ideal to have some kind of a "radio type input" to toggle between the contents shown through clicks on the thumbnails.
Beneath the sidebar are the thumbnails and on the right is the main content.
I'd like the page to have the text as a "placeholder" and whenever i click on a thumbnail with a image, the image should appear replacing the text shown as the main content.
At the moment if i click on a thumbnail it looks like this.
I'll keep on trying by myself but i'd be really grateful if you guys could help me out.
Stay safe and healthy!
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek - The Twin Tower of Arts</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../../assets/css/style.css">
<link href="../../assets/css/i20.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../assets/js/ubertooltip.js"></script>
</head>
<body onLoad="loadTip()">
<!-- START Mobile Nav-->
<header>
<nav class="d-xl-none headerMenu navbar fixed-top" onclick="openNav()">
☰
<h5 id="headerLogo">Christoph Urwalek</h5>
</nav>
</header>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
<br>
<br>
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><b>Christoph Urwalek</b></li>
<br>
<li>painting</li>
<li>drawing</li>
<li><a class="active" href="../collagework/collage.html">collage</a></li>
<li>video</li>
<li>
<a> </a>
</li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
<br>
<div class="thumbnailContainer">
<img href="/collagework/the_twin_towers_of_arts_in_education.html" src="../assets/img/The Twin Towers of Arts in Education/TextLogo.png" alt="" class="img-thumbnail border-0 img-thumbnail-desktop">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-01__.jpg" alt="" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-02__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-03__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
</div>
<!--END Thumbnaill Navbar-->
<div>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<!--main content-->
<p class="text-justify textMargin ">
<b>The Twin Towers of Arts in Education</b><br><br> Siebdruck auf Papier, 95 x 65 cm, 2013<br><br> Die Displays veranschaulichen in Diagrammstruktur Perspektiven künstlerischer Handlungsformen in Bildungsprozessen unterschiedlicher Partikularkulturen.
Jede Ebene der beiden Türme repräsentiert einen Konzeptrahmen, der Diskursformen mittels vier Axiomen zeigt: Reproduktion, Affirmation, Dekonstruktion und Transformation. Der linke Turm repräsentiert Wissensproduktion in künstlerischen Prozessen,
während der rechte Turm Wissensproduktion in analogen Bildungsprozessen repräsentiert. Die Konzeptrahmen in den Türmen bewegen sich zwischen kontextellen Strukturen und gesellschaftlichen Strukturen. Alle Eckpunkte der jeweiligen Axiome sind
entsprechend miteinander verbunden und stehen sich im Kommunikationsprozess kritisch gegenüber. Zwischen den beiden Türmen befindet sich die Achse der Kritikalität. Sie ist vermittelnd verbunden mit den einzelnen Diskursformen. Auf ihr entsteht
die Perspektive eines Gegenbewusstseins, das die Achse des vorherrschenden Bewusstseins in einem transformativen Lernprozess durchkreuzt. Die Arbeit orientiert sich an Stephen Willats Konzeption eines Parameter Modells, das zwischen unterschiedlichen
existierenden und möglichen ideologischen Konzeptrahmen vermittelt.
</p>
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="">
<div id="imgtext">
<!--TEXT EINFÜGEN-->
</div>
</div>
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Montage-01_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection_.jpg" alt="" style="width:400px;">
<div class="caption">
<p style="margin-top: 5px;" id="captionStyle">
Collection, Performance, © Christian Helbock<br> 2013
</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-10_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-13_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller<br>2013
</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-15_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller
<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Performance-16_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Collection, Performance, © Barbara Höller
<br>2013</p>
</div>
</a>
</div>
</div>
<!--section-->
<!--section-->
<div class="d-xl-none">
<div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview">
<a href="">
<img src="../assets/img/collection/Collection-Montage-02_.jpg" alt="" style="width:400px;">
<div class="caption">
<p id="captionStyle">Zusammenarbeit (Together), Montage: © Christian Helbock<br> 2013</p>
</div>
</a>
</div>
</div>
<!--section-->
</div>
<!-- d-xl-none -->
<!--section-->
</div>
<!--col-md-9-->
</div>
</div>
<!--END Wrapper-->
<script src="../assets/js/main.js">
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
Wrote a brief example on how to incorporate a basic image selector.
function myFunction(img) {
let currImage = img.target;
let image = document.querySelector("#expandedImg");
let textImage = document.querySelector("#imgtext");
textImage.innerText = currImage.alt;
image.setAttribute('src', currImage.src);
}
let images = document.querySelectorAll(".thumbnailContainer > img");
images.forEach((img) => {
img.addEventListener("mouseover", myFunction, true);
});
.thumbnailContainer > img {
cursor: pointer;
}
<html lang="en">
<head>
<title>Basic Image Selector</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="thumbnailContainer">
<img src="https://i.picsum.photos/id/344/200/300.jpg?hmac=hFZM-uJoRMyNATe_kjGvS2NGGP60jqqP64vpGQ98VAo" alt="This is Image 1" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/509/200/300.jpg?hmac=Y2Mtq5PEipyaFNlDH01CoNhW9to1T8GCuTf6yUSH-TY" alt="This is Image 2" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="This is Image 3" id="img-thumbnail border-0 img-thumbnail-desktop" />
<img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="This is Image 4" id="img-thumbnail border-0 img-thumbnail-desktop" />
</div>
<img id="expandedImg" />
<div id="imgtext"></div>
</body>
</html>
<div class="container">
<div class="row card-deck">
<% for(var i=0;i<campgrounds.length;i++){ %>
<div class="card col-12 col-md-4">
<img class="card-image-top" src="<%= campgrounds[i].image %>" style=width:100%;height:350px;>
<div class="card-body">
<h3 class="card-title"><%= campgrounds[i].name %></h3>
</div>
</div>
<% }%>
</div>
</div>
Here "campgrounds" is a dictionary array with 2 properties("name" and image source). Now this array has 6 items and my col-md-4 should give 3 items in a row in resolutions of medium and above. But, this is not working and there are 12 items in a single row when in large/medium resolutions. Why?
.card in Bootstrap has its own flex properties which override .col-*
You need to add .card as a child div of .col-md-4 and you will see the results.
.col-md-4{ margin: 20px auto; } /* Or use my-* classes */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row card-deck">
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
</div>
</div>
i have a website that use this template https://ld-wp.template-help.com/wordpress_63613/ and the problem is in the previous link .. the news div is loading about 30 to 60 seconds late than all the page contents .. you just can browse the link and view the problem
i will attach screen shots
i see that the template uses swiper plugin from * http://www.idangero.us/swiper/
i tried to download the original css and js files but i does not work
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-27T10:21:25+00:00">October 27, 2016</time>
</div>
<div class="post-meta post-comments">3 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-3-390x303.jpg" alt="Bedayia School Celebrates 100 days with their Students" width="390" height="303">
</div>
<h5 class="entry-title">Bedayia School Celebrates 100 days with their Students</h5>
</header>
<article class="entry-content">
<p>Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-19T10:20:30+00:00">October 19, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-6-390x303.jpg" alt="Bedaya School added 33 new photos to the album: Animal Show." width="390" height="303">
</div>
<h5 class="entry-title">Bedaya School added 33 new photos to the album: Animal Show.</h5>
</header>
<article class="entry-content">
<p>In BIS we focus on representing the new concepts by practicing real life experiences that help the students to make connections between the world and their studies .</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-10-03T10:16:05+00:00">October 3, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-7-390x303.jpg" alt="LU's commencement 2016" width="390" height="303">
</div>
<h5 class="entry-title">Bedaya School's commencement 2016</h5>
</header>
<article class="entry-content">
<p>This year the commencement at the Bedayia School has been the biggest in its…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-09-22T10:13:29+00:00">September 22, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-10-390x303.jpg" alt="Professor Kenobi at the Yale Conference 2016" width="390" height="303">
</div>
<h5 class="entry-title">Professor Kenobi at the Yale Conference 2016</h5>
</header>
<article class="entry-content">
<p>This spring the Bedaya School’s professor and the SPS business school dean Michelle Kenobi visited…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
<!-- Slide-->
<div class="swiper-slide">
<div class="content-wrapper">
<div class="entry-meta">
<div class="post-meta post-date">
<time datetime="2016-09-15T10:11:21+00:00">September 15, 2016</time>
</div>
<div class="post-meta post-comments">0 comments</div>
</div>
<header class="entry-header">
<div class="post-thumbnail">
<img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-9-390x303.jpg" alt="Law school expansion" width="390" height="303">
</div>
<h5 class="entry-title">Law school expansion</h5>
</header>
<article class="entry-content">
<p>As the submission process for this year has already wrapped up, we can see…</p>
</article>
</div>
<footer class="entry-footer"></footer>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"><i class="linearicon linearicon-chevron-left"></i></div>
<div class="swiper-button-next"><i class="linearicon linearicon-chevron-right"></i></div>
</div>
when it first loaded it becomes like this for 30 to 60 seconds depending on network speed
then it loads but after a long time of white space on the design
No space between attributes.
JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
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.