Topic: How to use dropdown on top of lightbox (photoswipe) thumbnail? (Facebook-like photo dropdown)

Ungr pro asked 4 years ago


Hello guys. In the following code im trying to achieve facebook-like dropdown opening on photo thumbnail. Lightbox is opening fine but when I click on dropdown lightbox is still being opened instead of dropdown. There seems to be some event binding on dropdown because when you click it 1st time lightbox is opened. However when you click dropdown 2nd time lightbox is correctly not being opened and instead dropdown menu is. Ive tried using stopPropagation() but that only breaks the function of dropdown... Please help :) Take a look at the following code:
<!-- Lightbox containers -->
<div class="mdb-lightbox-ui"></div>

    <!-- Lightbox gallery -->
    <div class="mdb-lightbox" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1">
        <figure class="view overlay col-md-4" itemprop="associatedMedia" itemscope=""
                itemtype="http://schema.org/ImageObject">
            <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                <!-- Thumbnail-->
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">
            </a>

            <div>
                <div class="mask cursor-zoom-in p-3 d-flex align-items-end rgba-black-light text-white">
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</span>
                    </div>
                    <div class="ml-auto dropdown">
                        <a class="badge badge-light" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
                        <div class="dropdown-menu dropdown-menu-right" data-boundary="window">
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-edit"></i> Edit photo
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-folder-minus"></i> Delete photo
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <figcaption itemprop="caption description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Possimus nobis sit veritatis
                cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate
                sequi corporis eaque corrupti. Vel, est.
            </figcaption>
        </figure>
    </div>

Piotr Glejzer staff answered 4 years ago


Hi, I think the reason why it is not will open is that you have 2 :
<div class="mdb-lightbox" itemscope itemtype="http://schema.org/ImageGallery">

I think it will gonna help if you will delete one of these. Best, Piotr

Ungr pro commented 4 years ago

Sorry, that was my mistake when writing a ticket. Currently there is only one .mdb-lightbox <div>.

Also when clicked on dropdown anchor lightbox image is opened instead.


Piotr Glejzer staff commented 4 years ago

Yea it is open when is clicked the first time.. hmm, I think it's a kind of bug. We are very sorry about that. We are gonna think more about that. Have a nice day.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome 70
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No