Turn thumbnail link to carousel and set as active.

[karpiyon]

Hi,

I use bootstrap 4

I want to create a responsive gallery with all the thumbnail on one page.

I know how to problematically create both the carousel and the thumbnails.

When the user clicks a thumbnail it will turn to a carouse with the selected image as active.

I believe this is best achieved with js.

1. How do I show the carousel on top of the thumbnails once the use clicks a thumbnail?

2. How do I set this as active (i know how to find the link to the image)

3. How do I remove the carousel, when the user clicks outside the carousel and leave the thumbnails.

A link to and existing code/gallery would be good as well - i'll extract the code from there.

Thank you,

[Nancy OShea · Accepted solution]

You can combine the Carousel component with the Modal window to build a photo gallery.  I wrote this tutorial a while back with Bootstrap 3x but you can also do it with version 4.

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

[karpiyon]

Great i'm trying this.

[karpiyon]

I am using cards for my thumb gallery to make it look like below.

I managed to create most of the gallery problematically.

How do I make sure that the image i click on is the first (active) when the carousel opens.

this can be different of course for every image i click on first?

[Nancy OShea]

Please post a link to your online test page so we can see what you see. 

[karpiyon]

Ok,

All is working fine - i had a problem in my php defining the correct ID.

the only think i still can't get is how to limit the modal size.

[karpiyon]

This is the link:

DnD-Production

i changed the transition to fade yet you can see that transition for different size images does not look good.

Perhaps I should set the background to transparent? should I override the css or is there another way?

The gallery is not optimized the thumbs take too long to load and there are too many images.

any suggestion for improvement are welcome

[karpiyon]

What limits the width of the carousel?

[karpiyon]

well i found that one and set:

"modal-dialog modal-lg"

i am trying to limit the height using either of the following with no luck so any help on this would be great as well

.modal-dialog {

  height: 300px;

}

.modal-body {

    /*max-height: 80vh; /*Sets the height to 80/100ths of the viewport.*/

  max-height: 200px;

}

.modal-content {

  height:60%;

}

[Nancy OShea]

Since your site uses PHP, you could populate your page dynamically from a folder of images.

In this example, I used Bootstrap 4 and Fancybox 3 lightbox viewer.  Fancybox is not free to use but it contains  some nice  features for mobile users and has better support for different sized images.

Alt-Web Demo :: Responsive Masonry Gallery

The relevant PHP code.

<div class="masonry"> 
<!--begin dynamic gallery-->
<?php 
$directory = '../folder/thumbs'; //path to thumbnails
$link = '../folder/slides'; //path to full-sized images
$allowed_types = array('jpg','jpeg','png'); 
$aFiles = array(); 
$dir_handle = @opendir($directory) or die("There is an error with your image directory!"); 
while ($file = readdir($dir_handle))  //traverse through directory
{ 
if($file=='.' || $file == '..') continue; //skip links to parent directories
$file_parts = explode('.',$file); //split file parts and put each into an array
$ext = strtolower(array_pop($file_parts)); //last part is extension
$title = implode('.',$file_parts); //whats left is filename
$title = htmlspecialchars($title);    //make the filename html-safe
if(in_array($ext,$allowed_types)) 
{   
$aFiles[] = $file;
}
} 
closedir($dir_handle); //close directory
natsort($aFiles); // natural sort filenames
$aFiles = array_reverse($aFiles); //display in reverse order
$i=0; //loop
foreach ($aFiles as $file) { //repeat as before
$file_parts = explode('.',$file); 
$ext = strtolower(array_pop($file_parts)); 
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);
echo '
<a data-fancybox="gallery" class="fancybox" data-slide="'.++$i.'" href="'.$link.'/'.$file.'"><img alt="'.$title.'" src="'.$directory.'/'.$file.'"></a>';
}
?>
<!--/masonry--> 
</div>

[karpiyon]

i do read all the images from a specific folder and the thumbs from a different one.

assuming i currently use my code, do you know of a way to:

1. Set the active image dynamically

2 Control the max width and height of the modal

3. elegantly turn the background of the modal to transparent?

thanks