Unresponsive Slideshow

Hi,

I have no idea why but when a gallery image is clicked the slideshow doesn't appear.
If I refresh the slideshow section appears but everything is unresponsive.
On gallerys with sale options this also means that the product options don't show.

I have tried removing all my custom css, header code etc... but the problem still exists.

Tested in both Firefox and Safari.

Heres a public gallery link to see for yourself.
https://www.in-depthphotos.co.uk/clients/mozart-requiem/

Regards Dave

Edited Wed Jun 17, 20 7:32 PM by David Coxsell

When previewing a different theme it works. You said you removed all the extra code but there is plenty there and also some nagging popup.

####### Additional CSS ######## */ #emformcontainer { border: solid #EDEDED 1px; text-align: left !important; padding: 10px; } #emformcontainer .pc {text-align: left !important;} .modal { display: none; justify-content: center; align-items: center; flex-direction: column; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.3); transition: 0.2s ease-in-out; opacity: 0; position: fixed; top: 0; left: 0; z-index: 999999; } @media screen and (min-width:800px) { #splashcontainer { display: none; background: #FFFFFF; width: 600px; left: 50%; margin-left: -300px; border: solid 1px #FFFFFF; position: fixed; z-index: 200; box-shadow: 0 0 8px rgba(0,0,0,.5); margin-bottom: 24px; } #splashcontainer { position: fixed !important; top: 50px !important; } } .social a { text-decoration: none; vertical-align: middle; text-align: left;} .social p {color: white; position: relative; font-size:15px !important; margin: 0;} #sidebar { right: 0; top: 330px; width: 45px; position: fixed; text-align: center; z-index:9; } .social i { vertical-align: middle; width: 40px; padding-right: 10px; position: relative; text-align: center; font-size:23px !important; line-height: 40px; } .social { margin-right: 10px; width: 300px; padding: 3px; display: inline-table; background-color: #3b5998; } .social:hover { margin-left: -200px; width: 280px; } .fbbar{background: #3b5998; border-radius: 10px 0px 0px 0px;} .instagrambar{ background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); } .messengerbar{background: #3b5998; border-radius: 0px 0px 0px 10px;} .callusbar {background: linear-gradient(45deg, #25d366, #075e54);} .mailusbar{background: #6DB9D2;} .icon-bar { width: 100%; background-color: #000; position: fixed; bottom: 0; z-index:100; } .icon-bar a { float: left; width: 16.666666666666667%; text-align: center; padding: 10px 0; transition: all 0.3s ease; color: white; font-size: 22px; } .fbm{background: #3b5998;} .instagramm{ background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); } .callusm{background: #22B601;} .mailusm{background: #6DB9D2;} .messengerm{background: #3b5998;} .whatsappm {background: linear-gradient(#25d366, #075e54);} .width100vw { border: 0; width: calc(100VW); left: 0; margin-left: calc(-50vw + 50%); position: relative; } .e-mail:before { content: attr(data-website) "@" attr(data-user); unicode-bidi: bidi-override; direction: rtl; } .tel:before { content: attr(data-tel); unicode-bidi: bidi-override; direction: rtl; } hr {border-width: 1px 1px 0; border-style: solid; border-color: #EDEDED} .preview2 {margin-left: 50px; margin-bottom: 5px; border-style: solid; border-color: #EDEDED; padding: 10px;} .faqlink {margin-left: 100px; margin-bottom: 5px; padding: 2px;} .viewfinder {border: 2px solid #4D4D4D;} .viewfaqtext tr:nth-child(odd) {background-color: #EDEDED;} .viewfaqtext th, td {border: 1px solid #EDEDED; padding: 15px;} .viewfaqtext table { margin-left: 50px; } .block {padding: 8px; margin: 8px; background-color: #EDEDED } .productconfigsoptions{ background-color: #EDEDED; padding: 10px;} #photoGallery img {border: 0px solid #EDEDED; padding: 0px} #standardPage .title { padding: 4px; } #standardPage .text { padding: 4px; } #standardPage .expire { padding: 4px; } #standardPage .photos { padding: 4px; float: left; margin: 0 10px 10px 0; } #standardPage tr:nth-child(odd) {background-color: #EDEDED;} #standardPage th, td {border: 1px solid #EDEDED; padding: 15px;} #standardPage table { margin-left: 50px; } #blogPage .title { padding: 4px; } #blogPage .text { padding: 4px; } #blogPage .expire { padding: 4px; } #blogPage .photos { padding: 4px; float: left; margin: 0 10px 10px 0; } #blogPage tr:n th-child(odd) {background-color: #EDEDED;} #blogPage th, td {border: 1px solid #EDEDED; padding: 15px;} #blogPage table { margin-left: 50px; } #bPage tr:nth-child(odd) {background-color: #EDEDED;} #b Page th, td {border: 1px solid #EDEDED; padding: 15px;} #bPage table { margin-left: 50px; } #storePage tr:nth-child(odd) {background-color: #EDEDED;} .signature {background-color: #EDEDED; padding: 15px; font-size: 12px;} #postcattags {visibility: hidden;} .product {font-size: 12px;} .product img { height: 100%; width: 100%; } #mobilemenulinks ul li { text-align: left; } #mobilemenu {text-align: left; z-index:4;} a.anchor { display: block; position: relative; top: -200px; visibility: hidden; } @media only screen and (max-width: 1200px) { #footer{margin-bottom:50px;} body{margin-bottom:50px;} #rand-95873 .nofloatsmall, #rand-556274 .nofloatsmall { width:50% !important; margin: 0 !important; } #rand-25799 .nofloatsmall, #rand-139826 .nofloatsmall, #rand-24776 .nofloatsmall { width:45% !important; margin: 0 !important;} #rand-233813 .nofloatsmall, #rand-34441 .nofloatsmall, #rand-14141 .nofloatsmall{ width:50% !important; margin: 0 !important; } #rand-375882 .nofloatsmall, #rand-900444 .nofloatsmall { width:45% !important; margin: 0 !important;} } @media screen and (min-width:815px) { #rand-557988, #rand-894269, #rand-343578, #rand-388668{ display:none; } } #rand-557988 .width100vw { background: linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ), url(/sy-photos/page-photos/20190709095954-FD-1-2.jpg); background-position: center; background-size: cover; } @media screen and (max-width:1200px) { #rand-981914, #rand-994992, #rand-600793, #rand-443348, #rand-264274, #rand-40606, #rand-483710{ display:none; } } .addtocart, .submit, .submit:hover {border-radius: 80px; padding:16px; width: 276px; margin:10px; font-weight: bold;} .addtocartstacked {padding: 10px !important;} .addtocartstacked .addtocart {border-radius: 80px; padding: 10px !important;} .addtocartstacked #qty {padding: 10px !important;} ul {color: #FF8019} .description {text-align: left;} .imageview {border: 2px solid white;} .FMenu {text-align: center; padding-bottom: 20px; padding-top: 20px; } .FMenu ul {list-style-type: none; margin: 0; padding: 0px; overflow: hidden;} .FMenu li {display: inline-block;} .FMenu li a {display: inline-block; text-align: center; padding-left: 20px; padding-right: 20px; text-decoration: none;} } .photocaptioncontainer { display: none !important; } .priceblock {width: 100%; background-color: #6DB9D2; color: #FFF; font-size:25px; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px;} .premium {width: 100%;background: linear-gradient(45deg, #5997AB,#6DB9D2); color: #FFF; font-size:30px; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px;} .standard {width: 100%; background-color: #5997AB; color: #FFF; font-size:30px; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px;} .basic {width: 100%; background: linear-gradient(45deg, #6DB9D2, #5997AB); color: #FFF; font-size:30px; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px;} .firstyear {width: 100%; background: linear-gradient(90deg, #6DB9D2, #FF8019, #6DB9D2 ); color: #FFF; font-size:30px; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px;} a:link .mcall {padding-left:10px; color: #FF8019;} @media (max-width: 1200px) { .sshow {height: 375px !important;} #topMainMenuContainer { display: none; } #mobilemenubuttontop { display: block; } #mobilemenubutton { display: block; } #mobilemenu { display: block; } #headerContainer { width: 100%; } .nofloatsmall { float: none !important; width: 100% !important; margin: auto;} .showsmall {display: block} .hidesmall {display: none} } ul.dropdown ul li a, ul.dropdown ul li .text { padding: 10px 10px 10px 10px; font-size: 13px; width: 270px; } .sublink{font-size: 12px; font-weight:200; color: #FF8019;} .mobilesubmenu a:link { color: #FF8019; font-size: 15px !important; margin-left: 40px; } #gototop { position: fixed; top: 8px; right: 8px; z-index: 2; display: none; cursor: pointer; background: #ffffff; border-radius: 10px 10px 10px 10px; height:25px; padding:5px; } @media (max-width:1200px) { .billarrow {display:none;} }/* ####### End Additional CSS ######## */

Edited by

I removed all the code to test it then replaced it as it didn’t seem to make a difference.

How did you view it in a different theme?

I have an idea what it may be now though. I use sumo forms and the code I needed for that had to go in the footer file between the body tags.

If it is that, could I utilise no conflict function somehow?

Edited by

In your admin go to Design -> Themes. You can preview other themes from there. I just know how to make it preview other themes in the URL.

And when previewing another theme it worked. So it is something you have added somewhere in your theme.

Edited by

Thanks Tim,

I changed the theme on the gallery page and it made no difference for me.

I removed the Sumo Forms code and it fixed it so there is a conflict with Javascript somewhere. I guess i'll have to stop using Sumo and find something else that can do it.

I was using it for exit intent popups and form popups on button clicks.

Edited by