Jump to content
jriceart

Responsive gallery modal control issue

Recommended Posts

Recently I used a plugin to create a responsive gallery for a website. After some tweaking I got the gallery looking great but I'm having trouble getting the modal controls to cycle the images correctly. This issue has been plaguing me for a few weeks, I'm about to scrap the whole gallery and start from scratch if I can't get these darn buttons to work correctly:/ Really I'm thinking the issue is stemming from the multiple css files that the plugin needs to run the gallery.

A link to the actual site: http://testing123.emcfintech.com/#myCarousel   (Gallery at bottom of page.)

I tried building another gallery based off w3schools responsive gallery and it was looking great on my wamp server but as soon as I brought it into this website the 3rd row of the gallery skips an image and throws off the design. So I reinserted the plugin gallery. My question is should I try to fix the current gallery's controls or burn it down, remove the plugin's css and js and try to build the gallery from scratch? 

Any help would be greatly appreciated, thank you so much.

 

 <div class="mbr-gallery-row container" style="position: relative; height: 642px;">
        <div class=" mbr-gallery-layout-default">
            <div>
                <div>
                    <div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 0px;">
                        <div href="#lb-gallery2-7" data-slide-to="0" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Bump Die 001(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Bump Die</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 25%; top: 0px;">
                        <div href="#lb-gallery2-7" data-slide-to="1" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/COMPACT FORM ROLL (600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Compact Form Roll</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Creative" data-video-url="false" style="position: absolute; left: 50%; top: 0px;">
                        <div href="#lb-gallery2-7" data-slide-to="2" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Compact Roll Die and Starblade Module in Headstand(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Compact Roll Die and Starblade Module in Headstand</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 0px;">
                        <div href="#lb-gallery2-7" data-slide-to="3" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Compact Roll Die and Starblade Unit in Headstand(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Compact Roll Die and Starblade Unit in Headstand</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 214px;">
                        <div href="#lb-gallery2-7" data-slide-to="4" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Finished Fin Mill Machine and Uncoiler(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Finished Fin Mill Machine and Uncoiler</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Beautiful" data-video-url="false" style="position: absolute; left: 25%; top: 214px;">
                        <div href="#lb-gallery2-7" data-slide-to="5" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Five - Copper Fin Samples(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Copper Fin Samples</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 50%; top: 214px;">
                        <div href="#lb-gallery2-7" data-slide-to="6" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Louvered Die(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Louvered Dies</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 214px;">
                        <div href="#lb-gallery2-7" data-slide-to="7" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Louvered Roll Die in Headstand(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Louvered Roll Die in Headstand</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 428px;">
                        <div href="#lb-gallery2-7" data-slide-to="8" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Louvered Roll Dies(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Louvered Roll Dies</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 25%; top: 428px;">
                        <div href="#lb-gallery2-7" data-slide-to="9" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Oil Cooler Roll Die (600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Oil Coller Roll Die</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 50%; top: 428px;">
                        <div href="#lb-gallery2-7" data-slide-to="10" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Starblade Unit(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Starblade Unit</span>
                        </div>
                    </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 75%; top: 428px;">
                        <div href="#lb-gallery2-7" data-slide-to="11" data-toggle="modal">
                            
                            

                            <img alt="" src="/Images/Tube Mill Cassette(600x450).jpg">
                            
                            <span class="icon-focus"></span>
                            <span class="mbr-gallery-title">Tube Mill Cassette<br></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <!-- Lightbox -->
    <div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery2-7">
        <div class="modal-dialog" style="width: 1037px; top: 10px;">
            <div class="modal-content">
                <div class="modal-body">
                    
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <div class="carousel-item">
                            <img alt="" src="/Images/bump-die-001600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/compact-form-roll-600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/compact-roll-die-and-starblade-module-in-headstand600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/compact-roll-die-and-starblade-unit-in-headstand600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/finished-fin-mill-machine-and-uncoiler600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/five-copper-fin-samples600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/louvered-die600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/louvered-roll-die-in-headstand600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/louvered-roll-dies600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/oil-cooler-roll-die-600x450-2000x1500.jpg">
                        </div><div class="carousel-item">
                            <img alt="" src="/Images/starblade-unit600x450-2000x1500.jpg">
                        </div><div class="carousel-item active">
                            <img alt="" src="/Images/tube-mill-cassette600x450-2000x1500.jpg">
                        </div>
                    
                                        <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                 <span class="icon-prev" aria-hidden="true"></span>
                 <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                 <span class="icon-next" aria-hidden="true"></span>
                 <span class="sr-only">Next</span>
              </a>

                    <a class="close" href="#myCarousel" role="button" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">Close</span>
                    </a>
                </div>
            </div>
        </div>
        </div>
    </div>
					</section>

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...