Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #441712

    I am using Enfold theme andI have a Portfolio Grid page set up to open Portfolio Elements in an AJAX Portfolio. Thumbnails appear below an enlarged image and hovering over thumbnails on desktop/laptop changes the large photo to the one hovered. This won’t work on mobile, therefore I’d like to add navigation arrows in addition to the thumbnails if possible. I’d actually like to add navigation arrows to use on desktop/laptop as well as mobile as an additional means of viewing photos.

    What CSS can I add to make this happen?

    • This topic was modified 9 years, 7 months ago by larrywillisva.
    #442454

    Hi larrywillisva!

    not sure what you mean, as there are already arrows on desktop as well as on mobile:

    However, it sounds like custom work to me, which would be out of our support scope. You can find someone who can do this job for you here.

    Cheers!
    Andy

    #442521

    Hi Andy,
    Those arrows only go from one portfolio to the next, not one photo to the next in the same gallery.

    The only way to make it work on mobile is to change “gallery” to “slideshow” in the portfolio entry. Then I lose the thumbnails completely and I really like the look of them.

    I’ve set up the Deep Run entry as slideshow and the Tucker entry as gallery. Would love to have navigation arrows on all devices while still using the thumbnails.

    • This reply was modified 9 years, 7 months ago by larrywillisva.
    #445034

    Hi!

    Try adding this to your custom CSS.

    @media screen and (max-width:767px) {
    .prev-slide, .next-slide {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    }

    That will make it so you can cycle through them on mobiles as well.

    Cheers!
    Elliott

    #454604

    Sorry for the delay in response, but I am just now testing the code and unfortunately it didn’t work.
    The Tucker gallery with thumbnails still won’t work.

    #454976

    Hey!

    Not sure if I’ve missed something but all I can see is Highland Springs High School Graduation on the page you linked?

    Regards,
    Rikard

    #456751

    We have graduations this week and I had to remove the test data. I was hoping to resolve this before posting portfolios, but will have to revisit it after graduations are finished this week. There will be active photo galleries tomorrow though, if that helps. We’ll just be using the slideshow (not the gallery) this time as the gallery doesn’t have navigation arrows on mobile.

    #457323

    Hi!

    It looks like you turned the AJAX feature off. Turn it back on and add the CSS code to the top of the Dashboard > Enfold > General Styling > Quick CSS field.

    Regards,
    Elliott

    #474478

    I’m ready to revisit this topic as school is out for the summer.

    http://henricoschools.us/photo-galleries/
    I’ve turned the AJAX feature on and added preview images for the first portfolio entry (Freeman).
    The CSS code provided above has been added and I don’t see any arrows.

    I want arrows to appear on all devices for navigation so you don’t have to rollover the thumbnails as that won’t work on mobile. If you click the thumbnail on mobile, it opens that photo and arrows appear but they don’t do anything.

    #475753

    Hey!

    not sure what you mean. About which arrows are you talking about? the arrows when hovering over the images? Please use screenshots to make things clear (imgur, dropbox).

    Cheers!
    Andy

    #475802

    Hopefully the screenshots will make my request clear. Perhaps I can’t use the AJAX grid for mobile.

    #475976

    Hi!

    I see the arrows fine on my Moto E which uses the latest version of Android. I checked your screenshots but they are displaying as blank for me.

    Regards,
    Elliott

    #476473

    I’m not sure why you can’t see the photos; they look fine on my end. I’ve provided individual links instead.

    Click on this link: http://henricoschools.us/photo-galleries/
    Click on the first portfolio element – Freeman
    You’re saying that you see arrows on either side of the large photo on this page? I don’t see them on any device. There are arrows in the top right side above the photo title/caption, but those navigate between portfolio items not photos within a portfolio item.

    I want to be able to navigate with arrows in addition to (or rather than) hovering over the thumbnails. If you click on the thumbnail on a mobile device, it opens the one photo and the navigation arrows don’t do anything. You have to close that photo and click on the next thumbnail. Not an ideal situation.

    I’m not sure how else to explain what I’m trying to do.

    #476621

    Hi!

    Sorry, I thought you were talking about the navigation arrows. Your talking about the slideshow arrows as seen in the first portfolio item on our demo, http://kriesi.at/themes/enfold/portfolio/portfolio-ajax/.

    To get that you’ll need to display the slideshow instead of the gallery in the portfolio post settings.

    Best regards,
    Elliott

    #476646

    The “Single Portfolio: Big Slider” (top, right on that page) does exactly what I want. It has thumbnails and hover works on a desktop, but the slideshow arrows work when you click on a thumbnail; it goes through the photos. Mine just keeps showing the same photo. I must have something set up wrong. If I select slideshow instead of gallery, I don’t get the thumbnails.

    #477206

    Hi!

    When you edit your portfolio post scroll down until you see the “Display Preview Images” option. Make sure that is set to “Slideshow” instead of “Gallery”. You currently have them all set to gallery.

    Cheers!
    Elliott

    #477243

    I’ll just use the slideshow and forget about the gallery, thanks for your help.

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Portfolio Grid AJAX Portfolio navigation arrows’ is closed to new replies.