By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,569 Members | 1,164 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,569 IT Pros & Developers. It's quick & easy.

Hyperlink to display img onMouseover?

P: 9
Hi guys!

I'm working in PHPBB 3.0.2 and I'd like to create a BB Code that gives one thumbnail image on mouseover and the larger version in a popup window like Lightbox 2, Ajax, or the likes.

It's a linux server.

Thanks for the help!

-Free

Edit: At some point in the future, it would be nice if, when clicked, the image appears on one side and any updated text information can appear on the other side. Much of the pictures' corresponding information changes quarterly and we would like to be able to keep up with it. Thanks again!
Jul 14 '08 #1
Share this Question
Share on Google+
16 Replies


hsriat
Expert 100+
P: 1,654
Why don't you use the lightbox itself?
Jul 14 '08 #2

P: 9
The following goes inside the header on a normal webpage. Which file and directory do I put this in?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
This part goes in the existing stylesheet, but where do I find the stylesheet? We've got ten or twelve different styles - I hope I do not need to edit each style. (If so, I expect it would be simplest to make an include statement in each and point to one file. Within that one file write all the includes and necessary directory information for the Lightbox 2 files)
Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Also, I believe this is the code to Lightbox the file:
Expand|Select|Wrap|Line Numbers
  1. <a href="images/{SIMPLETEXT1}.jpg" rel="lightbox[{SIMPLETEXT2}]">{SIMPLETEXT1}</a>
I don't mind editing the code to get what I want (lack of next and previous arrows, etc), but this is my first foray into anything SQLish. I feel quite lost on where to put the files and what exactly my point of reference is for the directories.

Also, it appears to me many of the files I would normally edit are missing or hidden. I believe I have full access within my FTP client, so I think they're simply not there.
Jul 14 '08 #3

hsriat
Expert 100+
P: 1,654
I suppose this should be working, as you are doing exactly as what told by the creator of that lightbox in that how to use page. What's the problem now?
Jul 15 '08 #4

P: 9
I suppose this should be working, as you are doing exactly as what told by the creator of that lightbox in that how to use page. What's the problem now?
Yeah, I get *what* I'm supposed to do, but I don't understand *where* these inserts need to go.
Jul 15 '08 #5

hsriat
Expert 100+
P: 1,654
Yeah, I get *what* I'm supposed to do, but I don't understand *where* these inserts need to go.
First three need to be inside the head tag, and the hyperlink needs to be where your image is (inside the body tag).
Jul 15 '08 #6

P: 9
First three need to be inside the head tag, and the hyperlink needs to be where your image is (inside the body tag).
Of which file though? I'm working in a PHPBB forum. I don't have a simple webpage that I can edit those lines in.

Here's a picture to help clarify.

Jul 15 '08 #7

hsriat
Expert 100+
P: 1,654
make a 'js' and a 'css' folder in your root folder and place the js files and css files in them respectively.
Jul 16 '08 #8

P: 9
Ok, I tried adding the following to the overall_header.html of the forum style I'm using.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
And then I appended the code from the Lightbox CSS to the style's own CSS file.

In the BBCode I put the following (customized for the website)

BB Code:
Expand|Select|Wrap|Line Numbers
  1. [lightbox2]{TEXT}[/lightbox2]
HTML Replacement Code:
Expand|Select|Wrap|Line Numbers
  1. <a href="http://www.website.com/pics/{TEXT}.jpg" rel="lightbox[set]" title="{TEXT}">{TEXT}</a>

Now when I post [lightbox2]sample[/lightbox2] it gives me the sample.jpg in a whole different page.

I suspect the root of this is addressed on Lightbox's Support page where it states

Expand|Select|Wrap|Line Numbers
  1. It doesn't work at all. The image opens up in a new page. What's wrong?
  2.     This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
  3.     <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
  4.     A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
  5.     <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
Unfortunately, I haven't found a conflict source. I've since downloaded the entire forum to search more thoroughly, but I haven't turned up anything yet.
Jul 16 '08 #9

hsriat
Expert 100+
P: 1,654
I'm sure you are doing some small mistake somewhere. Do you have any test page so that I may have a look at it?
Jul 17 '08 #10

P: 9
Sent you the information in a private message. Thank you!
Jul 18 '08 #11

hsriat
Expert 100+
P: 1,654
The problem is actually not a JavaScript problem but a PHP one. You would need to change the viewtopic.php and/or viewtopic_body.html (inside the style folder) files since you have to add those three lines of <script> to the header of the page it.

While I'm looking into your problem, I'll ask some other PHP expert to help you out.

Regards
Jul 18 '08 #12

P: 9
Came across a PHPBB forum with Lightbox working. Sent you the information in a PM.
Jul 18 '08 #13

pbmods
Expert 5K+
P: 5,821
Subscribing. I will be in San Antonio this weekend, but I will take a look when I get back.
Jul 18 '08 #14

P: 9
Ok, I'm thoroughly confused at this point.

I ran a search for the head tag in the 610nm style:
overall_header.html
simple_header.html
ucp_pm_viewmessage_print.html
viewtopic_print.html


I input the above three lines of script into overall_header.html and simple_header.html, then upload each file to the webhost.

When I view the page source of a topic with the BB Code, the three lines of script do not appear at all.

ucp refers to the User Control Panel, and I do know adding the script lines to viewtopic_print.html does not change anything.

At this point, I'm not sure which file to edit, but I'm leaning towards 'body' rather than 'header' files, even if it means including a head tag.

As always, I'll keep you guys posted.
Jul 21 '08 #15

P: 9
As far as I can tell, it's an issue with the 610nm style itself. When I follow the directions and place the three script lines where they are supposed to go, they don't actually go in the head tag.

I'm still plugging at it though.
Jul 23 '08 #16

P: 1
Hi there,

I am trying to get lightbox 2.04 to work in phpbb 3.0.2 as well and I also configured it with Garage 2.

www.mx5cartalk.com

I have made a directory called lb under my phpbb directory. My lb directory contains the css, js and image directories. It does everything it should when I run the demo file called index.html, the image does just what it should and opens up in a window that has been darkened and clicking outside of the image or on the x exits which is normal.

But when I run it in phpbb I get an error when I insert it into the styles/prosilver/template/overall_header.html file. The css file is fine and so are two of the js files, the lightbox.js file is the one that shows as an error....

Anyone...
Aug 23 '08 #17

Post your reply

Sign in to post your reply or Sign up for a free account.