Highlighted

Turn thumbnail link to carousel and set as active.

Engaged ,
Apr 14, 2019

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,

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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/

Views

404

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Turn thumbnail link to carousel and set as active.

Engaged ,
Apr 14, 2019

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,

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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/

Views

405

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 14, 2019 0
Adobe Community Professional ,
Apr 14, 2019

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/

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 1
Engaged ,
Apr 14, 2019

Copy link to clipboard

Copied

Great i'm trying this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Engaged ,
Apr 14, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Adobe Community Professional ,
Apr 14, 2019

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
karpiyon LATEST
Engaged ,
Apr 14, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Engaged ,
Apr 14, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Engaged ,
Apr 14, 2019

Copy link to clipboard

Copied

What limits the width of the carousel?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Engaged ,
Apr 14, 2019

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%;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0
Adobe Community Professional ,
Apr 14, 2019

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 1
Engaged ,
Apr 14, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 14, 2019 0