PDA

View Full Version : jquery FancyBox


huffman_j
03-23-2010, 11:00 AM
I hope this posts because the last few post I have made have not shown up. This especially true of replies to my orignal posts and recent even new posts have not shown up.

I have made a sample webpage using jquery FancyBox and it does most of what I want.

http://www.angelfire.com/ak5/fawn/lakes/sample_01.php

If the small image is clicked, the large image does open, which is great. The issue is I want to be able to close the large image and go back to the original page without using the back button. How can this be done?

Another thing that came up when creating the page was I was supposed to use <div> tag rather than an AP div tag that I did use. When I tried to insert the <div> I got this:

753

I had no idea what to do with it. I could use some assistant with this if the <div> works better than the AP div.

One thing that may help is if someone has a working page using FancyBox that the link could be posted.

Thanks

Corrosive
03-23-2010, 12:18 PM
I thought fancybox has a cross in the top corner to close the box and return to the page.

I tried to get fancybox to work a few weeks back and struggled so I went for http://colorpowered.com/colorbox/ instead. So you have got further than I did!

gentleone
03-23-2010, 02:39 PM
Sample page with a working demo: http://fancybox.net/
How to use: http://fancybox.net/howto
It's not that difficult. It's all explained.

Why do you make PHP pages? Your free hosting at Angelfire doesn't support PHP, so the link that you posted doesn't work. Why not just .htm or .html, because there is no PHP excitement going on on that page? I also see no JavaScript calls (jquery.js and fancybox.js) in between the head tags of this page.

The 'insert div tag' dialog:
'At inserting point' is where your cursor is flashing at the moment in your code and and/or design view.
In the class field you can fill in already a class name and this will be inserted automatically too after your opening div tag, so that you can style the div tag in your CSS. The same goes for the ID field.

huffman_j
03-23-2010, 07:14 PM
Corrosive
I thought fancybox has a cross in the top corner to close the box and return to the page.

The closeout "X" was not on my large images. So I have no idea. On the link that gentleone gave the large images did have the "X", so I have no idea.

I will check out the "ColorBox".


gentleone

Why do you make PHP pages?

I know angelfire does not support .php but I had my reason for making it .php. It could have been anything (such as .txt) except .htm or .html and it would have served my purpose. The page has everything showing that I put on it and even though it is .php, it does not need the php support to work.


I also see no JavaScript calls (jquery.js and fancybox.js) in between the head tags of this page.

The instructions did NOT call for the jquery.js and fancybox.js to be in the head, but I can add them and see what happens. It may also be beneficial to add the css link.

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

Also thanks for the insert div tag info.

domedia
03-23-2010, 07:53 PM
The instructions did NOT call for the jquery.js and fancybox.js to be in the head,
They did, it's the only way a jQuery plugin can work.
http://fancybox.net/howto

gentleone
03-24-2010, 10:06 AM
It may also be beneficial to add the css link.

Indeed... and I guess that's why the closeout 'X' wasn't showing.

But... how did you got the fancybox working on your sample page in the first place if you didn't include the necessary js and css links in the head?

Corrosive
03-24-2010, 10:09 AM
But... how did you got the fancybox working on your sample page in the first place if you didn't include the necessary js and css links in the head?

I was wondering that...:confused:

gentleone
03-24-2010, 10:27 AM
I was wondering that...:confused:

That explains this quote:
The issue is I want to be able to close the large image and go back to the original page without using the back button.
It just opened the big image in a blank page, so with no fancybox magic at all. :)

Corrosive
03-24-2010, 11:10 AM
Ah, well deduced!

huffman_j
03-24-2010, 12:05 PM
Talk about confusing. When I made the first sample page, I know the jquery-1.4.2.min.js and jquery.fancybox-1.3.1.pack.js were placed in the <head>. Now when I open page in DW CS4 and also the source for the page on the web, these do NOT show in the code. The page is working with the exception to be able to close large image with an "X".

So I made a second example page in cluding these in the <head>:
jquery-1.4.2.min.js
jquery.fancybox-1.3.1.pack.js
jquery.fancybox-1.3.1.js
jquery-1.4.2.js

Again closed the page in DW and reopened it and those were now no longer showing in the code view. When I upload the page to the server, The page takes forever to even open and now clicking the small images on the page just locks up the page and the large image never shows.

As for the link to <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" /> I have not worked on that yet. I have not been able to find a file called "jquery.fancybox-1.3.1.css". I will have to keep looking for that. The only js file I have even remotely related is style.css

:o Yes I am confused

Corrosive
03-24-2010, 12:07 PM
Hi

You shouldn't need to include both versions of fancybox and jquery. 'min' and 'pack' are scaled down in case you are concerened about page weight.

huffman_j
03-27-2010, 02:31 PM
I want to thank each and everyone for input and help. I finally gave up on Jquery and found and extension for Dreamweaver that works like I want.

Here is my sample page.

http://www.angelfire.com/ak5/fawn/lake/mygallery.php

Again thanks for everything.

gentleone
03-27-2010, 02:47 PM
I finally gave up on Jquery
That's a bummer, because jQuery rocks! You only had to copy/paste and there is a full explanation how to do so.

By the way... the sample page is again a PHP document on your non-PHP-supported free-hosting at Angelfire, so the link is useless for us to see what's happening on that sample page. It just opens the page in 'view source' view. :)

huffman_j
03-27-2010, 08:38 PM
You only had to copy/paste and there is a full explanation how to do so.

I went and followed those instructions on the How to Use page. Even printed them out so did not have bounce back and forth. No matter what I did, it did NOT work.

Not sure why sample page is not opening for you, it works fine for me using IE6. If you using IE7 or IE8 that might why. IE8 is a strange beast.

http://www.angelfire.com/ak5/fawn/lake/mygallery.php

domedia
03-28-2010, 08:59 PM
There's nothing wrong with IE8, the file just have the wrong file extension, you have to save the file as an .html file.

Also if jQuery does not work, then you did something wrong. If you want to try again, we can help you out.

huffman_j
03-30-2010, 01:34 PM
Back to FancyBox

On the example page:
http://fancybox.net/

In the head it shows to use this:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Fancybox - Fancy lightbox alternative</title>
<script type="text/javascript" src="

huffman_j
03-30-2010, 01:38 PM
Crap only a small part of I had in the post showed so here I go again.

Back to FancyBox
On the example page:
http://fancybox.net/

In the head it shows to use this:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />

<title>Fa<script type="text/javascript" src="

gentleone
03-30-2010, 04:51 PM
To insert your code you can better use the code or html tags. Inserting code tags is the # icon and inserting html tags is the <> icon in the menu of the WYSIWYG editor when you click on the button 'POST REPLY'.

The only 3 files that you have to include in your head in order to get Fancybox to work are below and you need to fire the plugin with a piece of Jquery listed underneath the three includes.

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script> </head>

Make sure that you fill in the right paths if you call the above files out of another directory in your site root.

Than there are two optional JavaScript files one for the effect and one if you want the visitor be able to navigate through the gallery with the mousewheel.

Post your full code with using the code tags, so that we can see what you have so far on your page.

huffman_j
03-31-2010, 10:34 AM
Here is my first attempt at using fancybox.

http://www.angelfire.com/ak5/fawn/fancy/fancy_01.html

I know it does NOT work. It is very slow to open also.

gentleone
03-31-2010, 12:15 PM
You didn't fire the plugin in your head like I explained and your images are not correctly coded in order to work as a FancyBox gallerry.

Put this code as well in your head underneath the link to jquery.fancybox-1.3.1.css:

<script type="text/javascript">
$(document).ready(function() {

/* Apply fancybox to multiple items */

$("a.grouped_elements").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});
</script>

Put this instead where you have your images in the code:

<a class="grouped_elements" rel="group1" href="large/1000.jpg"><img src="small/s1000.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="large/1000a.jpg"><img src="small/s1000a.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="large/1000b.jpg"><img src="small/s1000b.jpg" alt=""/></a>

huffman_j
03-31-2010, 05:05 PM
I made those changes

It will not preview in DW, it locks up.
I uploaded the page to the server and does the same, locks up.

gentleone
03-31-2010, 09:35 PM
The path to the fancybox CSS file is not right. If I view the source in Firefox and I click on the that fancybox CSS link it doesn't open the CSS file in my source view. I get the Lycos 404 error page 'File not found' which means the file is not where you're pointing to.


<link rel="stylesheet" type="text/css" href="/jquery.fancybox-1.3.1.css" media="screen" />


So check your paths!

huffman_j
04-01-2010, 09:51 AM
All .js files are in the "fancy" directory along with jquery.fancybox-1.3.1.css and style.css.

href="/jquery.fancybox-1.3.1.css" and href="/style.css" in the links show in the "fancy directory.

That is the path indicated in the code for everything. I also checked on the server and everything is where it should be.

gentleone
04-01-2010, 10:14 AM
Okay... I see. The styles.css is also not loading if I click on it. The problem is the / in front of the CSS files.

<link rel="stylesheet" type="text/css" href="/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

That slash indicates that it has too look for the CSS files in the root. Can you remove them both?

gentleone
04-01-2010, 10:17 AM
Tip! Its wise to keep things organized on your web server. Make seperate directories in your root called 'css', 'js' and 'images' and put all the related files in there.

huffman_j
04-02-2010, 12:06 PM
NOw we are getting closer to what it should be. I took both "/" from the links.

http://www.angelfire.com/ak5/fawn/fancy/fancy_01.html

The page is still very slow to load and when the thumbnail image is clicked the large image opens in the same window and there is NO "X" to close it and still have to use Back Arrow to get back to the thumbnails.

It should open the large image on a separate window with a way to close that window.

Hope that makes sense.

gentleone
04-02-2010, 01:03 PM
I checked the sample page and indeed still no Fancybox magic at all. Did you copy all the images that belongs to fancybox in your 'fancy' directory as well? Anyhow if you didn't this should not have effect in getting fancybox to work as it should be. It should have work, but then with out the necessary images. The closeout 'X' for example would have be then just a link.

The only thing I could come up with is as I look at the source I see a lot of other JavaScript calls from Lycos (for the advertisements) loading after the JavaScript calls from Fancybox and perhaps there might be some conflicts with one or more of these files, so that Fancybox is not working at all.

Didn't you consider just to get a payed hosting, so that you don't have all the advertisements crap on your page? A payed hosting for a simple website don't cost much these days.

Corrosive
04-02-2010, 01:09 PM
Didn't you consider just to get a payed hosting, so that you don't have all the advertisements crap on your page? A payed hosting for a simple website don't cost much these days.

I'd have to agree 100% with gentleone on that point. Hosting isn't that much.

huffman_j
04-02-2010, 06:12 PM
Only images I found was in Query Lightbox and all were .gif. I opened jquery.fancybox-1.3.1.css with notepad and the only reference to an open image was open.png.

I then converted the open.gif in lightbox to open.png and put it into the fancy directory and uploaded to a commerical server.

http://www.dafic.net/fancy/fancy_01.html

After doing all this, when I preview in DW, it does open the large image on a separate window but without any way to close that window except the back arrow.

On the internet, does the same thing except can NOT use the backarrow and NO way to close the large image.

I am guessing I don't have the right image for the close, but we are getting closer to making it work.

gentleone
04-02-2010, 06:32 PM
Aha... It's working now! There was indeed a conflict with one of those Lycos JavaScript files.

Your one step away from the full Fancybox magic :)

In your fancybox.css there are a lot of background-image properties that are pointing to certain images. These images are needed to style the fancybox. One of them is the close 'X'. Those images are in another directory, or you forgot to upload them to your 'fancy' directory where the css says they are in. Anyways they are not there, because when I click on a couple of them I get the 404 error 'file not found'.

So check where all those images are and put them in your 'fancy' directory.

gentleone
04-02-2010, 06:34 PM
By the way all those images should have come with the download from fancybox.net

huffman_j
04-03-2010, 06:36 PM
http://www.dafic.net/fancy/fancy_01.html

Yeah finally it is working just as it should.

I am not sure why they don't put those images in the fancybox download. After about 15 googles I found a site to save the images and put them in the subdirectory 'fancy'.

Thank you, thank you, thank you

domedia
04-03-2010, 07:59 PM
I am not sure why they don't put those images in the fancybox download.
They are all in the download,

http://fancybox.net/ -> click the download button
.

gentleone
04-10-2010, 10:55 AM
http://www.dafic.net/fancy/fancy_01.html

Yeah finally it is working just as it should.

I am not sure why they don't put those images in the fancybox download. After about 15 googles I found a site to save the images and put them in the subdirectory 'fancy'.

Thank you, thank you, thank you

You're welcome, but if i look at your sample page those images doesn't look healthy at all to me. :) My guess is that you've assigned the same image (close X) to all the background-image properties in the fancybox.css.

Like Domedia said and like I suggested... download all the necessary images from fancybox.net.