I'm a bit lost and haven't found any solution to my problem, so I decided to ask Your help. Maybe I don't know how to phrase this problem and that's why I can't find any solution, so any help is appreciated!
My client's website is built on a Wordpress, but the website is handwritten (not a bought theme) and on one page, she wants to have references to her company's portfolio. References act like Wordpress post at the moment, but we would like to add Gallery to every post and if a client clicks onto the post's link, it will open up a gallery in a lightbox.
How posts look like on a website. (Sorry for the Estonian language)
I added "Featured Galleries" plugin (image in the post) so that on Post page, I can add images to the gallery. And now my question is, how can I get those images to lightbox gallery?
I have managed to get those images to my website, but not the way I would like to, here is my code:
<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
<a href="<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' %s', $image_src[0] );
}
?>">
<div class="bg_img"<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"', $image_src[0] );
}
?>> </div>
<h3><?php the_title(); ?></h3>
<p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>
</a>
</div>
<div>
<?php $galleryarray = get_post_gallery_ids($post->ID);
foreach ($galleryarray as $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$attachment_meta = wp_get_attachment( $id ); ?>
<a id="<?php echo $id; ?>" href="<?php echo $image[0]; ?>" data-lightbox="image-1">
<img src="<?php echo wp_get_attachment_url( $id ); ?>">
<?php echo '</a>';?>
<?php } ?>
</div>
If there is a simpler way to do this, then I'm up for it as well! Any help is appreciated.
I got to a point, where every post has its own gallery and if you open the first post on website, there comes a lightbox gallery, where you can check all the images for this post. HTML/PHP Code:
<?php
$i = 1;
while( $refs->have_posts() ): $refs->the_post();
$galleryarray = get_post_gallery_ids($post->ID);?>
<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
<div class="bg_img cursor"<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"', $image_src[0] );
}
?> onclick="openModal(<?php echo $i; ?>);currentSlide(1)"> </div>
<h3><?php the_title(); ?></h3>
<p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>
</a>
</div>
<!-- Modal -->
<div id="myModal-<?php echo $i; ?>" class="modal">
<span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">×</span>
<div class="modal-content">
<?php
foreach ($galleryarray as $index => $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$number = $index+1; ?>
<div class="mySlides">
<div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div>
<img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%">
</div>
<?php } ?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<?php
foreach ($galleryarray as $index => $id) {
$image = wp_get_attachment_image_src( $id, ‘thumb’ );
$alt = get_post_meta( $id, '_wp_attachment_image_alt', true);
$number = $index+1; ?>
<div class="column">
<img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>">
</div>
<?php } ?>
</div>
</div>
<?php $i++;
endwhile; ?>
JavaScript Code:
<script type="text/javascript" id="lightbox-js">
function openModal(i) {
document.getElementById('myModal-'+i).style.display = "block";
document.getElementById('pageHeader').style.zIndex = "0";
document.getElementById('pageFooter').style.zIndex = "0";
document.getElementById('pageContainer').style.textAlign = "left";
}
function closeModal(i) {
document.getElementById('myModal-'+i).style.display = "none";
document.getElementById('pageHeader').style.zIndex = "10";
document.getElementById('pageFooter').style.zIndex = "9";
document.getElementById('pageContainer').style.textAlign = "center";
}
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;
}
</script>
Everything is okay for the first post, it will get me a main image from the gallery and the others are below, where you can see them and choose them as well. But it seems that for the other posts, it doesn't work. Lightbox will open and in the below column, images for this specific posts are there, but they wont show up big, as it seems that JavaScript works only for the first Modal.
Question is, how can I get it right for the other ones so I can see correct images for specific posts? Website for posts: https://vmtehitus.ee/referentsid/ (Sorry, it's only in Estonian).