-
Posts
-
I’m trying to create 3 colums with horizontal scroll arrows
Each column will have 1 square image
I’d like the entire image to be linked to another page and have a text/title/caption overlay (like the image module).I love the way image caption overlays work and I want to be able to horizontally scroll through a series of images that are hyperlinked. I found the content slider was the closest so I started working with that.
I hacked a sloppy attempt together by adding this custom css and using the content slider titles:
* ––– CONTENT SLIDER TITLE OVERLAY ––– */
.avia-content-slider .slide-entry-title {
color: white;
position: absolute !important;
top: 45%;
justify-content: center;
text-align: center;
padding-left: 50%
padding-right: 50%;
width: 100%
}
When I add an image caption, the title disappears.You’ll see I was testing images in columns to find the right look and also the content slider to make it scrollable. I need the ability to scroll to new images horizontally. I apologize for wasting your time if there is another module that does exactly this already. I couldn’t find it.
I will add that the content slider navigation arrows aren’t exactly what I’m looking for either. subtle arrows on the outside of the 3 columns would be preferable, like I see on easy slider, post slider and others. This isn’t a critical issue. Just next on my list after I solve this ticket.
Hi bluesbrush,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaOk, It would look similar to 3 column layout with an image in each column, except you’d be able to scroll horizontally. I mocked up a couple different kinds of nav arrows but I can tweak that after I get it working.
http://rileydev.com/wp-content/uploads/mockups/enfold-image-slider.jpg
http://rileydev.com/wp-content/uploads/mockups/enfold-image-slider2.jpgThe text/caption overlay would have some variable overlay opacity and rollover effect, just like images do currently.
Hi bluesbrush,
Thank you for clarifying. I went to check the page again and it seems to be removed. Did you find what you were looking for?
Best regards,
VictoriaWhich page url did you check? The temporary login plugin url takes you to a 404 for some reason but then you should be able to view the url I provided, which is my test page for the feature I’m trying to implement
Hi bluesbrush,
Can you try to add this css code in Quick CSS:
#top .avia-smallarrow-slider-heading { display: block; position: absolute; top: 50%; margin-top: -12px; } #top .avia-smallarrow-slider .avia-slideshow-arrows { width: 100%; } #top .avia-smallarrow-slider .avia-slideshow-arrows a.prev-slide { margin-left: -50px; } #top .avia-smallarrow-slider .avia-slideshow-arrows a.next-slide { margin-right: -50px; }Best regards,
NikkoThanks Nikko. That got me a little further in my pursuit. The only part that is missing now is the image zoom effect that my images have. Is there a way to add that zoom effect to the images in the content slider?
Hi bluesbrush,
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
VictoriaI am able to get the images to zoom by adding this Quick CSS, but they extend beyond the image frame instead of matching the zoom effect of other images on the site:
/*———————————————-*
CONTENT SLIDER IMAGE ZOOM
trying to act like other site images
*———————————————-*/.avia-content-slider img:hover {
-webkit-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}Hi bluesbrush,
Yes, normally there is another container that has overflow hidden and so images do not grow past it. In this case, there is no such container and so you get that effect.
Best regards,
Victoria
- You must be logged in to reply to this topic.