Please help with my jquery issue, 2 scripts together

[anguilla1980]

I'm trying to get 2 jquery scripts to both work on the same page. One just shows text over a thumbnail when it's hovered over, the other just expands the thumbnail when it's click on. I'm so close I can almost taste it but I'm totally stumped now   To make things easier, here is a tiny .zip so you can see what I'm doing. http://www.classicdragons.org/TEMP.zip

 

Just open temp.html and you can see that the hover over jquery works perfectly, but clicking does nothing. Then just remove this from temp.html :

 

$(function() {
    $('img').hover_caption();
  });

 

...and you will see that the hover jquery is now of course broken but now the click to expand the thumbnail jquery works.

 

I'm desperately trying to get these to work together! Please help, I would really appreciate! Thank you in advance!!!!

 

Alex

[anguilla1980]

Bump for some help still

[winlonghorn]

I am looking at your code as we speak. I will see what I can find for you.

[anguilla1980]

Thank you so much!

[winlonghorn]

  On 12/05/2016 at 01:14, anguilla1980 said:

Thank you so much!

Expand  

No Problem!

[winlonghorn]

Ok, so far it appears that the overlay is getting in the way of letting you click the actual image when it is created. I am still looking.

 

EDIT: What about just changing the height of the caption overlay so it doesn't take up the whole image?

Edited May 12, 2016 by winlonghorn

[anguilla1980]

if it only took up the top half of the image that would be ok. I need at least that much though to put info about each image.

[anguilla1980]

With help from winlonghorn, he has helped me so the hover over works and when I click on the image, it brings up the viewer. However the full image doesn't display in the viewer.

 

I have updated the link in my OP to reflect where I stand currently. I'm so close now! Just need to figure out why the image doesn't display in the viewer.

 

Any help much appreciated! Thanks!

[briley]

The reason that you don't see the full image is because of this code in /css/jsgallery.css:

 

.jsgallery-container #jsgall_imageContainer:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle !important; 
    height: 100%;
}

That code is inserting a block above your full size image in the viewer that is the full height of the page, thus the full image is pushed off of the screen. Removing that style block makes your full-size image visible.

[anguilla1980]

When I remove that, the image appears, but then the full size image still has the shadow covering it until I move the courser off screen. Plus clicking anywhere doesn't remove the full size, it just reloads it.

 

But that is a step forward, thanks!!!!!!! I've been stuck on this for weeks lol.

[briley]

The reason that clicking on the full-size image doesn't close the full-size view is because you've setup the gallery script to run whenever an <img/> is clicked. Since the full-size image is rendered as an <img/> tag, clicking on it actually runs the gallery script again.

[anguilla1980]

Gotcha. Not sure what else I could do there tho

[briley]

There's obviously still a lot of conflict between those two scripts. Can you describe what the goal you're trying to accomplish is? There may be a better way to get there.

[anguilla1980]

I simply want to be able to mouse over an image (it's an art gallery web page with dozens of thumbnails on a page), the mouse over display a description of the image, then if clicked, the full size image shown. Then clicking anywhere will exit out of the full image view, or clicking next or swiping next when in full image view go to the next images in full size.

 

Thanks for any help, this is really challenging me, not my programming expertise at all

Edited June 9, 2016 by anguilla1980

[anguilla1980]

Anyone have any more insight that may help me? Much appreciated! Thanks!

 

Alex