Extreme Beginner... Help implementing Fancybox?

Ben

unread,

Jun 8, 2009, 7:35:25 PM6/8/09

to fancybox

I know very little code, have mostly been dealing with dreamweaver
through design view, and I want to use fancybox on my site. I pretty
baffled by the instructions at http://fancy.klade.lv/howto. Is there a
very basic level walk through that someone could point me to? Much
appreciated.

Ben

unread,

Jun 8, 2009, 7:42:10 PM6/8/09

to fancybox

or an example of finished fancybox code?

On Jun 8, 7:35 pm, Ben <beAND...@gmail.com> wrote:
> I know very little code, have mostly been dealing with dreamweaver
> through design view, and I want to use fancybox on my site. I pretty

> baffled by the instructions athttp://fancy.klade.lv/howto. Is there a

JFK

unread,

Jun 9, 2009, 5:46:08 PM6/9/09

to fancybox

what you need depends on what kind of content you want to display with
fancybox:
single pictures?
picture galleries?
movies?
youtube?
google maps?
other web pages?
generated content?

all of the above?

some content would require different options and/or tweaks

Ben Andrew

unread,

Jun 9, 2009, 5:53:20 PM6/9/09

to fanc...@googlegroups.com

picture galleries. I want to have a group of thumbnails, click on them and the box pops up, and be able to click through to the next one.

JFK

unread,

Jun 9, 2009, 6:33:49 PM6/9/09

to fancybox

simple gallery

the script:
<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();
});
</script>

the html:
<div>
<a rel="group" class="gallery" title="title 1" href="images/01.jpg"
><img src="images/thumb _01.jpg" /></a>
<a rel="group" class="gallery" title="title 2" href="images/02.jpg"
><img src="images/thumb _02.jpg" /></a>
<a rel="group" class="gallery" title="title 3" href="images/03.jpg"
><img src="images/thumb _03.jpg" /></a>
...etc
</div>

the attribute 'rel' is very important to group the images within the
same gallery
the title will be shown as the caption of fancybox if exists
when you hover the current image (left or right) the navigation arrows
will show up

On Jun 9, 2:53 pm, Ben Andrew <beand...@gmail.com> wrote:
> picture galleries. I want to have a group of thumbnails, click on them and
> the box pops up, and be able to click through to the next one.
>

Ben Andrew

unread,

Jun 9, 2009, 8:59:14 PM6/9/09

to fanc...@googlegroups.com

ok...
so with the following code, i've got a thumbnail that opens the larger image, but without any fancybox. if someone could be kind enough to let me know whats wrong, id really appreciate it.

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox/jquery.jquery.fancybox-1.2.1.pack.js"></script>

a...@sofortsurf.de

unread,

Jun 9, 2009, 9:49:57 PM6/9/09

to fancybox

Check your paths, especialy src="jquery.fancybox/
jquery.jquery.fancybox-1.2.1.pack.js"

Andreas

j.pitcher

unread,

Jun 10, 2009, 1:05:06 PM6/10/09

to fancybox

Don't put your stylesheet link inside style tags. So don't wrap this:

with:

<style> and </style>

And then anywhere you see: href="......", make sure the path inside
those quote marks is correct. Remember, it's a directory structure,
relative to the HTML file. For example, say your HTML file is in a
folder called "Project", then href="jquery.fancybox/
jquery.fancybox.css" means that next to the file at the same level
inside "Project" is a folder called "jquery.fancybox" and inside there
is the "jquery.fancybox.css" file. Like so:

Project
|-- mywebpage.html
|-- jquery.fancybox
|-- jquery.fancybox.css

Ben

unread,

Jun 12, 2009, 4:47:16 PM6/12/09

to fancybox

aha, works now. thanks all. no to stick it into my site....

Jay Wasack

unread,

Jul 1, 2013, 9:35:03 PM7/1/13

to fanc...@googlegroups.com, bean...@gmail.com

I would like to do the same but with PDFs. I'm in the same boat. Little code knowlege, using WP and installed the plugin. But it does not seem to work.

Reply all

Reply to author

Forward