How to enlarge an image by clicking Solved

Question

Good evening everyone,

I'm returning to a topic that has already been resolved, but which is not very well explained for beginners. https://forums.commentcamarche.net/forum/affich-11179466-agrandir-image-sur-clic
I have some basic knowledge in HTML, CSS, PHP, and SQL, and I would like to know how to enlarge an image by clicking on it.

The solution is offered by this blog: http://www.huddletogether.com/projects/lightbox2/

The problem I'm encountering, and I don't think I'm the only one, is that I don't know what to do after downloading the folder.
It says to load the file into our HTML page (How do you do this clearly?)

Could someone enlighten me and provide a clear "user manual"! :)
Let's say as a Christmas gift!

Thank you for your responses

Happy holidays to everyone!!

Lutchi-Lutcho

RAD ZONE · Accepted Answer

RAD ZONE Webcreation                  a+  --  &#9827; La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. &#9827;

RAD ZONE · Answer

Hello it's very simple here is the basics 1: you link the js and css to your page by adding these 3 lines between the head of your page, like this 2: you add a data-lightbox to the images you want to give the effect to, add a title if you want to have a caption, image 1 if you want a series of images you give them the same data-lightbox image 1 image 2 that's all for the essentials! catch you later -- ♣ The greatest mistake a man can make is to be afraid of making one. ♣

lutchi-lutcho · Answer

Great :D

You answered my question perfectly because you were "CLEAR"!

Thank you Rad zone!

Have a great holiday A+

P.S.: For the image code, I just paste it in the body where my image is located, right?

animostab · Answer

Hello

1 unzipped the file lightbox2.6.zip with, for example, 7zip

you place the js folder and its contents at the root of your site
you place the css folder and its contents at the root of your site
you place the img folder and its contents at the root of your site

in your web page in the <head> tag you insert the following lines of code

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

to apply lightbox on the images

you put your images in the img folder

you place the following code within the body tags of your web page

<a href="img/image-1.jpg" data-lightbox="image-1" title="image 1">image #1</a>
<a href="img/image-2.jpg" data-lightbox="image-2" title="image 2">image #2</a>
...etc

There you go
--
A little thank you is better than a great ignorance

lutchi-lutcho · Answer

Thank you animostab!!  I will try this right away!  I think you have given me the last keys to succeed! :)

RAD ZONE · Answer

When I click on it, the image opens in large but in another window.

.
You must have a problem with the JS !!
Links to JS are incorrect or JS is blocked by your browser!

Here is my example that works with your IMAGES2 folder, take a look
http://www.solidfiles.com/d/614baf2804/

See you later

--

♣ The greatest mistake a man can make is to be afraid of making one. ♣

lutchi-lutcho · Answer

SUPER I DID IT! The problem was that the files in the 3 folders (img, css, js) were incomplete.  Thank you all  Thank you RAD ZONE!!

How to enlarge an image by clicking

7 réponses

Canon mb5350 - cartridge replacement impossible

Texture issues in enshrouded

Football manager (club management game)

Select next line csh foreach

Win32 kamso then rootkit detection

Win32:spyware-gen [trj] detected by avast

Unknown video error on the freebox player

Make it or break it

How to open a cbr file

Please log in with manager privileges.