CODEWITHSUNDEEP
jqueryimagetextonclickpopup
Rnft
Rnft

Reputation: 115

jQuery: how to display image with text content with onClick?

This is what I want to do with jQuery: I have four different images displayed on a page. When I click on one image, I want it to enlarge and somewhere next to it, I want text attached to it, preferably right on the side (or below) of the image. Everything else on the page must become blurred (maybe this should be done with CSS, not sure).

And I should also be able to click it away somehow, perhaps with an 'x'-button or clicking outside the image/text content.

Since the images will be displayed on different places on the page, I must make sure that the text always stick with the image. I don't want a general textbox on a fixed place on the page, where all text is displayed, but instead the text must always belong together with the image.

Any tips?

UPDATE

Okay, so I managed to solve it by using fancybox, and the code worked great in JSFiddle. However, when I tried to copy the code to Notepad++ it didn't work anymore! So far I have tried with these versions of jQuery and fancybox:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

I also copied the code to use in another JSFiddle project, and it stopped working too. How is that possible? How can it go from working fine, to not working at all?

Upvotes: 0

Views: 693

Answers (1)

Suman KC
Suman KC

Reputation: 3528

Instead of this: 

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

Do this:

<link rel="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

Upvotes: 2

Related Questions