I want to replicate this gallery:
https://www.w3schools.com/howto/howto_js_lightbox.asp
But instead of the static pictures, i need it to display the contents of my "gallery" field in Advanced Custom fields.
This is my code:
<?php
$images = get_field('extra_photos');
if( $images ): ?>
<div class="row2">
<?php foreach( $images as $image ): ?>
<div class="column2">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="openModal();currentSlide(1)" class="hover-shadow2">
</div>
<?php endforeach; ?>
<!-- Images used to open the lightbox -->
</div>
<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal2">
<span class="close2 cursor" onclick="closeModal()">×</span>
<div class="modal-content2">
<div class="mySlides2">
<div class="numbertext2">1 / 4</div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container2">
<p id="caption2"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column2">
<img class="demo2" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="currentSlide(1)" alt="Nature">
</div>
</div>
</div>
<?php endif; ?>
It only displays the first image of the gallery.
You can see it in action here:
http://electives-abroad.org/hospital-internships-and-electives-at-mkoani-hospital-on-pemba-island/
How can i solve it?
UPDATE
Here is the Javascript:
<script>
// Open the Modal
function openModal() {
document.getElementById('myModal2').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal2').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("demo2");
var captionText = document.getElementById("caption2");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
Related
this is my very first post in here!
So, my problem is: i do not want to call my slideshow.php in my page.php when i do not set an image in it (or any value) because it throws errors in the console.
so how to avoid the unnecessary javascript call if there is no featured product to show?
thank you very much!
here is the example from my page.php where i want to call it only if there is a featured product:
<?php get_header();
if (is_front_page()) {
include('slideshow.php');
};
?>
And here is my slideshow.php file:
<div id="slideshow-container">
<?php $query = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 5,
'product_tag' => 'featured',
'order' => 'DESC',
) );
while ($query->have_posts()) : $query->the_post(); ?>
<?php $imgurl = get_field('slideshow_img');
$size = 'full';
if( $image ) {
echo wp_get_attachment_image( $image, $size );
} ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix slides fade' ); ?> role="article">
<div class="container">
<div class="title-holder">
<h3 class="slide-title"><?php the_title(); ?></h3>
</div>
</div>
<div class="arrow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</article>
<?php endwhile; ?>
<div class="slideshow-pager">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
var slideIndex = 1;
var timer;
showSlides(slideIndex);
window.addEventListener("load",function() {
showSlides(slideIndex);
timer = setInterval(function(){plusSlides(1)}, 4000);
})
function plusSlides(n){
clearInterval(timer);
if (n < 0){
showSlides(slideIndex -= 1);
} else {
showSlides(slideIndex += 1);
}
if (n === -1){
timer = setInterval(function(){plusSlides(n + 2)}, 10000);
} else {
timer = setInterval(function(){plusSlides(n + 1)}, 10000);
}
}
function currentSlide(n){
clearInterval(timer);
timer = setInterval(function(){plusSlides(n + 1)}, 10000);
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
A hacky solution :
Introduce a js variable if there is an image
<?php
if( $image ) {
?>
<script> const imageExists = true;</script>
<?php
echo wp_get_attachment_image( $image, $size );
}
?>
After you can use the imageExists variable in your js code
I am trying to create a slideshow image gallery by following this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery
I am also using #foreach to get the images. So far, I have managed to get the images and the next/previous buttons are working fine. But I am not sure how to do the onClick part.
here is my code
view/blade
<div class="row">
#foreach ($images as $image)
<div class="mySlides">
<img src="{{ asset($image->image_location) }}" style="width:100%" alt="slide">
</div>
#endforeach
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="row">
#foreach ($images as $image)
<div class="column">
<img class="demo cursor" src="{{ asset($image->image_location) }}" style="width:100%" onclick="currentSlide(1)" alt="Image not Available">
</div>
#endforeach
</div>
script
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
Inside the blade #foreach loop, a $loop variable is available, as described here: https://laravel.com/docs/7.x/blade#the-loop-variable
You may use $loop->index to access the index of your thumbnail image in the array, and use that in the onclick event:
onclick="currentSlide({{ $loop->index }})"
i created this slide show but it does not change by it self how can i set a time for it to change automatically is there is a way to that now it will just change whenever i press a button otherwise it wont change here is my codes
HTML
<div class="slideshow-container" style="width: 100%;height: 500px" >
<?php
$get = $data->show(" SELECT * FROM movies LIMIT 3 ");
foreach ($get as $row) {
$id=$row['id'];
$name=$row['m_name'];
$type=$row['type'];
$description=$row['description'];
$trailer=$row['trailer'];
$background=$row['background'];
?>
<div class="mySlides " style="">
<div class="numbertext">1 / 3</div>
<img src="../../src/upload/posts/<?php echo $background; ?>" style="width:100%;height: 500px">
<div class="content text-left">
<h2 style="color: white;"><?php echo "$name"; ?><a><button type="button" class="btn btn-danger p-1 m-2"><span class="fa fa-play">ترایلهر</button></span></h2>
<h3 style="color: #fdd835;"><?php echo "$type"; ?></h3>
<h3 style="color: #fdd835;"><?php echo "$description"; ?></h3>
</div>
</div>
<?php } ?>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center;width: 100%">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Javascript
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
im trying to that for about 2 days and i still did not get it can anyone help me with this
If you need to animate the slides continuously after a period, then use the setInterval method.
The following will animate your slides after 3 s. But please make sure your slideIndex is initialized.
var intervalID = setInterval(()=> {
try {
showSlides(slideIndex += 1);
} catch Exception {
console.log(Exception);
}
}, 3000);
If you want to remove the above interval worker, you will need to use the following
clearInterval(intervalID);
Web console from the pageI have a simple website based on PHP platform, then I decided to add an automatic JavaScript slider on one of the specific page, before then that the side link works fine but when automatic slide show kicks in the side link doesn't work. Again i removed the slideshow code then it again works fine? My question is how can i make the js slideshow and side link work?
I have tried searching the queries, played with divs and tags but couldn't find the solution
<div id="slide">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<tr>
<td>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<script>
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
</div>
</td>
</tr>
</div>
</td>
</tr>
I want my side navigation link to be working with slideshow, when slideshow loads as the side link doesnot navigate me to other page.
I'm trying to split array result into two slides. I have round about 50+ entries in my array. I want to show just 14 on each slide/page. I want to show the remaining in other slides/pages.
What i tried is below:
<div class="mySlides fade">
<div class='content'>
<div class="symptoms-container">
<?php
$slideCount = 1;
$symptomCount = 1;
?>
<div class="row">
<?php foreach($symptoms as $id => $symptom): ?>
<div class="col-md-6">
<ul class="check-list">
<li>
<label class="label_check" for="symptom_<?php echo $symptom['id'] ?>">
<input type="checkbox" data-gender="<?php echo $symptom['gender'] ?>" id="symptom_<?php echo $symptom['id'] ?>" name="symptom[<?php echo $symptom['id'] ?>]" value="<?php echo $symptom['id'] ?>" />
<?php echo $symptom['title'] ?>
</label>
</li>
<ul>
</div>
<?php $symptomCount++; ?>
<?php endforeach; ?>
</div>
<!--Row END-->
</div>
</div>
</div>
The above code is showing all symptoms/data/entries in one page i want the first 14 in one slide and the 2nd 14 in 2nd slide and so on. I hope it make sense.
Slides Code:
<div class="mySlides fade">
<div class='content'>
First Slide
</div>
</div>
</div>
<div class="mySlides fade">
<div class='content'>
This is a form and symptoms data 2
</div>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div><!-- Slider Next Prev Buttons End -->
JS:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "inline";
dots[slideIndex-1].className += " active";
}
Thanks for your time. Any help will be highly appreciated. let me know if further requirements is needed.
Thank you so much.
You can split the array with array_chunk and loop each chunk.
General idea:
$symptoms = range(1,50); // your array
$chunks = array_chunk($symptoms, 14); // split it to chunks of 14
foreach($chunks as $chunk){
echo "<div class='mySlides fade'>\n<div class='content'>\n"; // the html that creates the slide
foreach($chunk as $symptom){
echo $symptom . "\n"; // echoes 14 symptoms
}
echo "</div>\n</div>\n";
}
https://3v4l.org/K5smh