Gallery Slideshow – Buttons
-
OK, I’ve positioned the buttons and have the correct image in there for the hover, however, the images are not lining up.
Is there a way to take the hover our completely? That might be even better!
-
Looking good! We’re getting there.
It looks like I accidentally left the ‘html’ off the front of the hover selectors I gave you in the code block this morning. I added those in for you and I apologize for that.
There’s now no hover state. :)
-
Yay! Thanks again for all your help.
I am going to continue to play with it a bit…ideally, I would love to add some text in with the buttons (like, image 1 of 7, 2 of 7, etc), but lets see if I can figure it out. Let me know if you don’t think it is at all possible.
-
Hmm. You may be able to do something with this. I think you’d need to connect it to the specific image though, which will make it a hassle to maintain if you foresee updating the slideshow often.
-
Ok! I’ll play around with that then.
One final final question: is it possible to make the buttons smaller? I played around some code and couldn’t figure it out.
-
Are you trying to make the arrows in the image you added smaller? Or the clickable area smaller?
Can you post the code you tried? Put it between backticks (`) to make a codeblock.
-
I’d like to make the clickable area and the arrows smaller. I’d like to mimic the arrows here: http://www.leong-leong.com/work.php?id=7
this is an example of what I am currently playing with:
‘html body div div.slideshow-controls a:last-child {
background-image: url(‘https://annascherman.files.wordpress.com/2015/10/arrows.png’) !important;
background-size: 50% 50% !important;;
background-position: 20px 0 !important;
}’I’m realizing it just makes the image smaller within the clickable circle…
-
oops let me try that again
html body div div.slideshow-controls a:last-child { background-image: url('https://annascherman.files.wordpress.com/2015/10/arrows.png') !important; background-size: 50% 50% !important;; background-position: 20px 0 !important; } -
Thanks! To modify the area of the clickable area, you’ll want to target the a tag’s size, rather than the background size. Here’s the current code that sets the height and width:
body div div.slideshow-controls a, body div div.slideshow-controls a:hover { height: 32px !important; width: 32px !important; }We’re already overriding these selectors in your CSS panel, so find the corresponding code and add a height and width setting there. (Make sure you keep the ‘!important’ part too.)
Once you do that, you’ll probably want to then manipulate the size of the background image to fit in the new button. The code you have currently is the way to do this.
Hope this helps! Let me know if you have any trouble. :)
-
Oh awesome! Thank you so much. I am really close to what I want it to look like.
As I am trying to add an image counter, am I on the right track with this: http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
-
Hi Shawna!
Are you still following these messages? I would love your help with this one last item (add image x of y to the buttons)…did you have something in mind when you said you thought it would be possible (but that it would need to be connected to the individual image)….if you could just help me get started, it would help me to play with it from there. I tried starting a new thread, but no one else seemed to think it is possible (and I can’t get a staff member to respond).
-
Hi Anna! I apologize for the delay. Our company is on a retreat this week, so our responses are taking longer than usual.
I’m uncertain where to go from here, so I’ve asked our CSS expert to take a look and follow up with you. He’ll stop by soon. :)
-
-
Hi Shawna,
I was just curious if there have been any updates on this…in addition, I am having a horrible time making sure that the slideshow buttons appear no matter what size the screen is! I guess I eliminated the responsive feature when I modified the look of the buttons…
Do you know anyway to link the slide location, buttons and text so that they don’t overlap each other?
-
@annascherman, I’m sorry for this late reply. As @shawnajroberts mentioned we were on retreat this past week, and I was down sick during that time.
I’m sorry to say that I don’t see a way of adding an “x of y” for each image since there isn’t a unique CSS class or ID for each image in the gallery.. I’ve tried several pseudo selector CSS tricks, but can’t target the individual images.
- The topic ‘Gallery Slideshow – Buttons’ is closed to new replies.
WordPress.com Forums 