• 0

Please help with my jquery issue, 2 scripts together


Question

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

14 answers to this question

Recommended Posts

  • 0

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 by winlonghorn
  • 0

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!

  • 0

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.

  • 0

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.

  • 0

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.

  • 0

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 by anguilla1980
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • RoboForm 9.7.5 by Razvan Serea RoboForm is the top-rated Password Manager and Web Form Filler that completely automates password entering and form filling. RoboForm makes logging into Web sites and filling forms faster, easier, and more secure. RoboForm memorizes and securely stores each user name and password the first time you log into a site, then automatically supplies them when you return. RoboForm's powerful Logins feature eliminates the manual steps of logging into any online account. With just one click RoboForm will navigate to a Web site, enter your username and password and click the submit button for you. Completing long registration or checkout forms is also a breeze. Simply click on your RoboForm Identity and RoboForm fills-in the entire form for you. You no longer need to remember all your passwords. You remember one Master Password, and RoboForm remembers the rest. This allows you to use stronger passwords, making your online experience more secure. RoboForm uses strong AES encryption for complete data security. The all new RoboForm comes with Chrome and Safari browser support, iPhone/iPad and Android support, as well a brand new RoboForm Everywhere license for use on unlimited computers and mobile devices. RoboForm 9.7.5 changelog: Prepared for the upcoming RoboForm browser extension with New Auth. Download: RoboForm 9.7.5 | 42.1 MB (Free, paid upgrade available) View: RoboForm Website Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • NTLite 2025.06.10460 is out.
    • I understand. I am not talking about benchmarks at all, even though I probably should look into those too - I just mean historically Vivaldi was a rather sluggish chromium browser when in use compared to other chromium browsers. I am always willing to give it additional tries whenever performance improvements are mentioned in the patch notes.
    • First make whole system slow and now making it fast. That's your own doing-undoing !!
  • Recent Achievements

    • One Year In
      Vladimir Migunov earned a badge
      One Year In
    • One Month Later
      daelos earned a badge
      One Month Later
    • Week One Done
      daelos earned a badge
      Week One Done
    • Mentor
      Karlston went up a rank
      Mentor
    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      252
    3. 3
      +FloatingFatMan
      250
    4. 4
      ATLien_0
      225
    5. 5
      +Edouard
      181
  • Tell a friend

    Love Neowin? Tell a friend!