Image Gallery Title, Desc, Alt Text on Hover

  • terrybailey

    (@terrybailey)


    13 years, 1 month ago

    Hi all. I promise I have spent days trying to get this to work on my own, but to no avail.

    I am trying to get the title, description, possibly alt text and or caption to fade into view when I hover over a thumbnail within a gallery.

    I just have had no luck at all.

    Thanks in advance for any assistance anyone can provide.

    Terry

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Can you post here the code that you’ve tried?

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    Hi Andrew.

    Not really because I have tried so many things that I had just gotten so confused that I have pretty much started over.

    As you can tell, I’m not much of a coder, my background is graphic design.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    In which technology were you trying to implement the code you tried?

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    When you say technology, are you asking like j-query? I have tried css, javascript, jquery.

    But again, I would like to start from scratch with a watchful eye of someone that knows a lot more about this than me.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Yes, I meant jQuery or which ever technology you had used.

    I am trying to get the title, description, possibly alt text and or caption

    Do you currently have this data on the webpage?

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    Sort of. I have a page with a gallery of images. And I have inserted placeholder text within each area eg title, caption,alt text, and description. I have done this only on the first image in the gallery for testing only until I determined what would work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Can you provide a link to the website in question or some relating HTML?

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    Andrew

    The site is http://kristenwinston.com.s25982.gridserver.com/wp/appetizer-gallery/

    As you can see this is a gallery of thumbs that what I need to have happen is when I hover over any thumb I need it to display some or all of the info I have previously mentioned. I am sure you have seen this type of thing, a lot of times it is seen in a portfolio situation where their is a brochure image and when you hover over it it will display the client name for example.

    In my case, I need to display what the food item is with sometimes a description. And sometimes with the photographer credit.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Can you do something like;

    jQuery(document).ready(function($){

 $('.wp-caption-text').hide();   

 $('.gallery-item').hover(function(){
  $(this).children('.wp-caption-test').toggle();
 });

});

    It doesn’t look like you have jQuery referenced on that webpage.

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    Andrew:

    I put your jQuery in the head area. I don’t see that it did anything.
    I also tried it in the footer as well.
    So I put it back in the header.
    Make sure I did what you were suggesting.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    There was a syntax error, should now be fixed.

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    I’m sorry what does that mean, do I need to make change on my end?
    I just went to that page and it appears the same.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Try this code instead;

    jQuery(document).ready(function($){

 $('.wp-caption-text').hide();   

 $('.gallery-item').hover(function(){
  $(this).children('.wp-caption-text').toggle();
 });

});

    Thread Starter terrybailey

    (@terrybailey)

    13 years, 1 month ago

    Andrew.

    That jquery is now working in that it hides the caption and shows it on hover. So that is a step in the right direction.

    To give you a better idea of what I am trying to do is at this link http://tympanus.net/jCapSlide/

    It doesn’t have to be as elaborate as this site, but I do need the info to be on top of the image and not below.

    PS I appreciate your help with this.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 1 month ago

    Look at jQuery’s effects API
    http://api.jquery.com/category/effects/

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Image Gallery Title, Desc, Alt Text on Hover’ is closed to new replies.