Copy link to clipboard
Copied
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,
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.
Copy link to clipboard
Copied
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/
Copy link to clipboard
Copied
Great i'm trying this.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Please post a link to your online test page so we can see what you see.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
This is the link:
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
Copy link to clipboard
Copied
What limits the width of the carousel?
Copy link to clipboard
Copied
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%;
}
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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