logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-23-2010, 11:00 AM   #1
huffman_j
 
Join Date: Mar 2010
Posts: 17
Default jquery FancyBox

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:

divinsert.jpg

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
huffman_j is offline   Reply With Quote
Old 03-23-2010, 12:18 PM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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!
Corrosive is offline   Reply With Quote
Old 03-23-2010, 02:39 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
gentleone is offline   Reply With Quote
Old 03-23-2010, 07:14 PM   #4
huffman_j
 
Join Date: Mar 2010
Posts: 17
Default

Corrosive
Quote:
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

Quote:
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.


Quote:
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.
huffman_j is offline   Reply With Quote
Old 03-23-2010, 07:53 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by huffman_j View Post
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
domedia is offline   Reply With Quote
Old 03-24-2010, 10:06 AM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
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?
gentleone is offline   Reply With Quote
Old 03-24-2010, 10:09 AM   #7
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by gentleone View Post
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...
Corrosive is offline   Reply With Quote
Old 03-24-2010, 10:27 AM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Corrosive View Post
I was wondering that...
That explains this quote:
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.
gentleone is offline   Reply With Quote
Old 03-24-2010, 11:10 AM   #9
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Ah, well deduced!
Corrosive is offline   Reply With Quote
Old 03-24-2010, 12:05 PM   #10
huffman_j
 
Join Date: Mar 2010
Posts: 17
Default

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

Yes I am confused
huffman_j is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:39 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com