Image Gallery Title, Desc, Alt Text on Hover

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

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.

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

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.

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?

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.

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

Andrew

The site is https://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.

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.

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.

There was a syntax error, should now be fixed.

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.

Try this code instead;

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

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

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

});

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 https://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.

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