- Posts
I’ve created an Image Gallery at the bottom of https://josephsinnott.dreamhosters.com/personalwork/ that auto plays using the fader. I’m hoping you can help me with two questions.
1) There’s a small square gray dot that appears above the gallery that I’d like to remove. I use another Image Gallery on my home page (https://josephsinnott.dreamhosters.com/) that doesn’t have the dot, so I don’t know why it’s appearing on this one. Is it because my home page has the gallery configured as a slider?
2) I’d like to configure this gallery to keep auto playing and not react to user input. Whenever I touch or click on a photo in the gallery, the auto play stops. I’d like to change this without interfering with the functionality of the Image Gallery on my home page, which I *do* want to respond to user input so that visitors can scroll back and forth between images.
I tried setting it up using a Content Slider without success, in part because I couldn’t figure out how to work it. Everything I tried just wound up messing up the rest of the page. If you have comprehensive step by step instructions for using that instead, I can try it if you think it’s best. That said, I much like the Image Gallery function, since it’s very easier to set up and configure. Swapping photos in and out seems like it will be much easier with the Image Gallery.
Any advice gratefully received, and thank you.
-Joe Sinnott
Hi Joe,
The tiny gray square above the gallery on https://josephsinnott.dreamhosters.com/personalwork/ seems to be coming from the default style rules contained in the Hifidel theme. The gridblock class is currently added to row element than contains your gallery and this class assignment on that row is the source of the box. Hifidel has a default style rule that creates a pseudo element with a background color before list items in containers with the gridblock class and there are a couple methods we can use to remove that box.
The first method is to remove the gridblock class from the row completely which can be accomplished by temporarily switching your editor to Text mode. Once the editor is in Text mode, locate the row containing your gallery and remove the gridblock class from it.
Another way to hide that box is to use some Custom CSS that specifically targets the gallery type used on your Personal Work page and removes the background color of that pseudo element. This snippet should get rid of that background:
.palette-primary .gridblock .wcsliderfadeauto li:before { background: none; }I am currently unable to replicate the problem you described with the auto play stopping when clicking on or hovering over an image in that gallery. The only scenario I saw where the gallery stopped shifting is when the window displaying your website was no longer active on my desktop by switching to another browser window. The gallery started cycling again as soon as your website was active again in my web browser. What are the steps I need to take in order stop that gallery from rotating?
Hi Joseph,
Thanks for getting back to me so quickly. You’re right about the disabled navigation. It’s working exactly the way I want it to on Desktop and on the mobile emulator in the Post & Page Builder, but on an actual phone if I click anywhere near the gallery it stops auto playing. When that happens, I can swipe to bring up the next photo, but the auto play doesn’t starts up again until I refresh the page on my phone. I’d like to stop that from happening if I can.
Forgive me for not understanding, but I’m completely new to this and wasn’t able to figure out how to apply your advice about making the gray dot disappear. I couldn’t figure out where to place the snippet you provided, and wasn’t able to find a reference to “gridblock class” in text view for that page. The text that I *think* is associated with that gallery is:
</div>
<div class=”col-md-6 col-margin-bottom text-center col-xs-12 col-sm-12″ style=”padding-top: 0em; padding-bottom: 0em;”>[gallery display="sliderfadeauto" targetsize="medium" captions="hide" bottomspace="none" gutterwidth="0" columns="1" link="none" size="medium" hidecontrols="true" ids="1052,1053,1051,1048,1049,1050,1047,1041,1042,1043,1044,1045,1046,1039,1040,1037,1038,1036,1033,1034,1035,1027,1028,1029,1030,1031,1032,1024,1025,1026,1023,1019,1020,1021,1022,1013,1014,1015,1016,1017,1018,1009,1010,1011,1012,1008,1005,1006,1007,999,1000,1001,1002,1003,1004,998,997,996,993,994,995,988,989,990,991,992,985,986,987,979,980,981,982,983,984,976,977,978,971,972,973,974,975" orderby="rand"]
</div>
</div>
</div>
</div>
<div class=”boldgrid-section”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 col-xs-12 col-sm-12″></div>
</div>
</div>
</div>If you can give me a couple more tips about how to make the changes you referenced I’d be grateful, and sorry the beginner questions.
Hi Joe-
Sorry if that wasn’t clear, the solution isn’t too complicated.
Navigate to Customize > Advanced > Custom JS & CSS and add these two rules.
1. Get rid of the weird gray artifact above the slider:
.palette-primary .gridblock .wcsliderfadeauto li:before { background: none; }2. Disable all interaction on the gallery, but only on the “Personal Work” page:
.page-id-551 .wc-gallery { touch-action: none !important; pointer-events: none !important; }I tested this last code snippet out on an Android Phone, but my sources (1) and (2) indicate that these rules should also work on an iPhone.
You can disregard my question about where to put the snippet to remove the gray dot. I figured it out. The question about the auto play in the little fader gallery stopping on mobile still applies. No pressure.
-Joe
Hi Joe-
Glad to hear you got that sorted out! I was doing the research on disabling the touch interaction for the gallery, so sorry for the delay, we were both writing at the same time!Hi Jesse,
Thanks for getting back to me with so much so fast. All of that worked. Site goes live late tonight or early tomorrow.
Thanks again for all your help. You folks have made a daunting project a lot smoother than I expected it to go. I’ve learned a lot (although not nearly enough), and I know I’ll be bugging you more as I try and add features.-Joe
- The topic ‘[Resolved] Disable touch on Gallery and Gray dot above Gallery’ is closed to new replies.
