Highlighted

Smooth fade transition in bootstrap modal carousel

Engaged ,
Apr 15, 2019

Copy link to clipboard

Copied

Hi,

I created bootstrap modal carousel which contains images of various width and height.

The problem is that the transition of the images is not smooth.

This is the sample page where i also added, in css:

#myAutoGallery .carousel-item {

  transition: transform 1s ease, opacity .75s ease-out;

}

I also placed the carousel in the middle of the page as well as some color modifications

This only make the fade last longer but transition is still very jumpy for different size images.

How can make the transition smooth?

Sample page:

DnD-Production

Thank you!

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

Masonry is defined in the embedded CSS  of my demo page, inside the <head> tags.   But you don't need to use my layout.  Use your own layout.  Change the parent division from masonry to whatever you're using.

Views

1.3K

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

Smooth fade transition in bootstrap modal carousel

Engaged ,
Apr 15, 2019

Copy link to clipboard

Copied

Hi,

I created bootstrap modal carousel which contains images of various width and height.

The problem is that the transition of the images is not smooth.

This is the sample page where i also added, in css:

#myAutoGallery .carousel-item {

  transition: transform 1s ease, opacity .75s ease-out;

}

I also placed the carousel in the middle of the page as well as some color modifications

This only make the fade last longer but transition is still very jumpy for different size images.

How can make the transition smooth?

Sample page:

DnD-Production

Thank you!

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

Masonry is defined in the embedded CSS  of my demo page, inside the <head> tags.   But you don't need to use my layout.  Use your own layout.  Change the parent division from masonry to whatever you're using.

Views

1.3K

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 15, 2019 0
Adobe Community Professional ,
Apr 15, 2019

Copy link to clipboard

Copied

This Bootstrap approach is only good for same sized images.   Sorry. 

For what you want, Fancybox 3 would be a better choice.  I posted an example in Reply #8 of your other thread.

Re: Turn thumbnail link to carousel and set as active.

Nancy O'Shea, ACP
Alt-Web.com

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 15, 2019 1
Engaged ,
Apr 15, 2019

Copy link to clipboard

Copied

thank you

i was trying to avoid it but i'll give it a try.

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 15, 2019 0
Engaged ,
Apr 16, 2019

Copy link to clipboard

Copied

Hi,

I tried FancyBox3 but since my thumbnails have different size it does not look appealing.

This is how the thumbnails look in fancybox:

and this is in bootstrap since bootstrap thumbs are responsive:

this brings me back to the transition issue.

can't i control the transition better in the bootstrap gallery?

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 16, 2019 0
Adobe Community Professional ,
Apr 16, 2019

Copy link to clipboard

Copied

Use the Bootstrap cards layout you have now.

But use Fancybox as your image viewer.

Nancy O'Shea, ACP
Alt-Web.com

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 16, 2019 0
Engaged ,
Apr 16, 2019

Copy link to clipboard

Copied

Thank you,

not sure how to use fancybox as the image viewer i tried to follow your previous example:

https://forums.adobe.com/thread/2613919

...

<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');

...

Where is "masonry class defined?

Or can i use my current bootstrap 4  masonry card layout and somehow use fancybox as the viewer as you suggested.

many thanks

Dan

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 16, 2019 0
Adobe Community Professional ,
Apr 16, 2019

Copy link to clipboard

Copied

Masonry is defined in the embedded CSS  of my demo page, inside the <head> tags.   But you don't need to use my layout.  Use your own layout.  Change the parent division from masonry to whatever you're using.

Nancy O'Shea, ACP
Alt-Web.com

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 16, 2019 1
karpiyon LATEST
Engaged ,
Apr 16, 2019

Copy link to clipboard

Copied

Thanks!

That did it

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 16, 2019 0