Jump to content
epner

Using lightbox for multiple arrays

Recommended Posts

Is it possible to use this lightbox code with multiple galleries? At the moment, when using it with different galleries, lightbox will pop up, but it only show first gallery, and the others won't display.

I have implemented this lightbox code with my PHP code and for the first gallery, everything is fine, but when I click others, only those gallery thumbnails will show up, but the currentSlide isn't and I understand that code changes only in the first gallery.

My code:

		<div class="row">
			<div class="row-inner" id="ajax-posts">
				<?php 
				
				while( $refs->have_posts() ): $refs->the_post();	
					// get_template_part('content/content', 'reference');
					$galleryarray = get_post_gallery_ids($post->ID);
	
					 ?>
					
					<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
                      
                      <a>

							<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(<?php echo $id ?>)"> </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; ?>)">&times;</span>
						
						<div class="modal-content">          
								   <?php
									foreach ($galleryarray as $index => $id) {
										
										$image = wp_get_attachment_image_src( $id, thumb );
										/* $attachment_meta = wp_get_attachment( $id );*/ 
										$number = $index+1; ?>
								
										<div id="img-<?php echo $id; ?>" 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)">&#10094;</a>
						<a class="next" onclick="plusSlides(1)">&#10095;</a>

						<div class="caption-container">
						  <p id="caption"></p>
						</div>
									<?php
									foreach ($galleryarray as $index => $id) {
										$image = wp_get_attachment_image_src( $id, thumb );
										/* $attachment_meta = wp_get_attachment( $id );*/ 
										$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; 
				?>
			</div>		
		</div>

		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;}
		   console.log(slideIndex);
		  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;
		}

Is it possible to change that code somehow to get it working, or maybe better solution is to sum up every gallery array to one, and make one Modal, where those galleries pop up only when clicking on the right gallery?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...