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.
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.
<divclass="mbr-gallery-row container"style="position: relative; height:642px;"><divclass=" mbr-gallery-layout-default"><div><div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="0"data-toggle="modal"><imgalt=""src="/Images/Bump Die 001(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Bump Die</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="1"data-toggle="modal"><imgalt=""src="/Images/COMPACT FORM ROLL (600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Compact Form Roll</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="2"data-toggle="modal"><imgalt=""src="/Images/Compact Roll Die and Starblade Module in Headstand(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Compact Roll Die and Starblade Module in Headstand</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="3"data-toggle="modal"><imgalt=""src="/Images/Compact Roll Die and Starblade Unit in Headstand(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Compact Roll Die and Starblade Unit in Headstand</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="4"data-toggle="modal"><imgalt=""src="/Images/Finished Fin Mill Machine and Uncoiler(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Finished Fin Mill Machine and Uncoiler</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="5"data-toggle="modal"><imgalt=""src="/Images/Five - Copper Fin Samples(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Copper Fin Samples</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="6"data-toggle="modal"><imgalt=""src="/Images/Louvered Die(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Louvered Dies</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="7"data-toggle="modal"><imgalt=""src="/Images/Louvered Roll Die in Headstand(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Louvered Roll Die in Headstand</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="8"data-toggle="modal"><imgalt=""src="/Images/Louvered Roll Dies(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Louvered Roll Dies</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="9"data-toggle="modal"><imgalt=""src="/Images/Oil Cooler Roll Die (600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Oil Coller Roll Die</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="10"data-toggle="modal"><imgalt=""src="/Images/Starblade Unit(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Starblade Unit</span></div></div><divclass="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;"><divhref="#lb-gallery2-7"data-slide-to="11"data-toggle="modal"><imgalt=""src="/Images/Tube Mill Cassette(600x450).jpg"><spanclass="icon-focus"></span><spanclass="mbr-gallery-title">Tube Mill Cassette<br></span></div></div></div></div><divclass="clearfix"></div></div></div><!-- Lightbox --><divdata-app-prevent-settings=""class="mbr-slider modal fade carousel slide"tabindex="-1"data-keyboard="true"data-interval="false"id="lb-gallery2-7"><divclass="modal-dialog"style="width:1037px; top:10px;"><divclass="modal-content"><divclass="modal-body"><divid="myCarousel"class="carousel slide"data-ride="carousel"><divclass="carousel-item"><imgalt=""src="/Images/bump-die-001600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/compact-form-roll-600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/compact-roll-die-and-starblade-module-in-headstand600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/compact-roll-die-and-starblade-unit-in-headstand600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/finished-fin-mill-machine-and-uncoiler600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/five-copper-fin-samples600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/louvered-die600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/louvered-roll-die-in-headstand600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/louvered-roll-dies600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/oil-cooler-roll-die-600x450-2000x1500.jpg"></div><divclass="carousel-item"><imgalt=""src="/Images/starblade-unit600x450-2000x1500.jpg"></div><divclass="carousel-item active"><imgalt=""src="/Images/tube-mill-cassette600x450-2000x1500.jpg"></div><!-- Left and right controls --><aclass="left carousel-control"href="#myCarousel"role="button"data-slide="prev"><spanclass="icon-prev"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#myCarousel"role="button"data-slide="next"><spanclass="icon-next"aria-hidden="true"></span><spanclass="sr-only">Next</span></a><aclass="close"href="#myCarousel"role="button"data-dismiss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></a></div></div></div></div></div></section>
Responsive gallery modal control issue
in HTML/XHTML
Posted
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.