Because fancybox v1.3.4 seems to have problems with displaying jpe images and to keep things up to date I decided to update a website of one of my clients from fancybox v1.3.4 to v2.1.5. Here is what I needed to do.
The website basically contains a gallery. If a visitor clicks a thumbnail, fancybox opens a modal window and shows the image in a bigger size. Additionally one can cycle through all the pictures using the right or left arrows in the box.
The old fancybox was integrated into my website like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>[...]<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script><link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen" /><script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script><script type="text/javascript">$(document).ready(function() {$("a.zoom").fancybox();});</script>[...]</head><body><a class="zoom" rel="group" href="/images/pic1.jpg"><img src="/images/thumbs/pic1_thumb.jpg" alt="alternative description" title="image title" /></a><a class="zoom" rel="group" href="/images/pic2.jpg"><img src="/images/thumbs/pic2_thumb.jpg" alt="alternative description" title="image title" /></a><a class="zoom" rel="group" href="/images/pic3.jpg"><img src="/images/thumbs/pic3_thumb.jpg" alt="alternative description" title="image title" /></a></body></html> |
Of course normally those
1. Download the current version of fancybox
Download here: http://fancyapps.com/fancybox/#license
2. Create a new folder (optional)
I created a new folder js/fancybox2 to keep things seperate. Of course you can just clear the old folder and put the files there but I like to be able to fallback to the old version if something goes wrong.
3. Copy fancybox files
From the ZIP file copy all files from the lib directory (including the helpers folder) to the new folder.
4. Change HTML references
To use the new fancybox code change lines 10 and 11:
|
9
10
11
12
|
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script><link rel="stylesheet" type="text/css" href="js/fancybox2/jquery.fancybox.css" media="screen" /><script type="text/javascript" src="js/fancybox2/jquery.fancybox.pack.js"></script><script type="text/javascript"> |
5. Finished
Those steps in my case were all I had to do. I thought it would be more work…
To see all (new) functions of fancybox visit: http://fancyapps.com/fancybox/
Was this article helpful?
Consider buying me a coffee to keep my brain fueled 🙂
Leave a Reply