Website help. Need help a particular code v2.

Liquid Hellz

Hey all I was wondering what it would take to allow small pictures on my page to be blown up when you moused over them. Similar to this http://www.creativecontractors.com/projects/pubins/index.htm

Im using Publisher to make my webpage, don't know much html but i thought this feature was really cool. Can it be done with html or something basic or do I have to have flash.

Tejs

That website is using flash to do that. You can approximate that with some JavaScript animation, but flash/silverlight is better for that sort of thing.

I have to say though, it's not really a good design principle (imo). In your example, the 'balooning' of the picture is not really providing much to the user of the website. Is there a reason to include this feature in your webpage?

Liquid Hellz

Nope, just thought it was cool. Im looking for a way to display multiple pictures on one page that isn't just a slide show type. I want to be able to have them all on one page to view so that you don't have to click on them to go to another page but also don't want to make the page to big leading to scrolling up, down, left, right. Any recommendations?

Woot427

Liquid Hellz wrote: »

Nope, just thought it was cool. Im looking for a way to display multiple pictures on one page that isn't just a slide show type. I want to be able to have them all on one page to view so that you don't have to click on them to go to another page but also don't want to make the page to big leading to scrolling up, down, left, right. Any recommendations?

I'd suggest using lightbox. Details and examples of the effect can be found here:

http://www.lokeshdhakar.com/projects/lightbox2/

I would also google lightbox to find any other resources that may have code samples to make it really simple for you.

BEAST!

Well I'm assuming that you don't really care about the animation aspect of it and just want it to go from small to large when moused over. There are two ways to do this, both requiring some javascript.

The first way would be to simply resize the image when moused over like so:
<img src="yourimagehere.gif" style="width:100px;
border:2px solid black;" onmouseover="this.style.width='400px'" onmouseout="this.style.width='100px'" alt="" title="" />

The second way would be to use jquery to load a new image, you can see this in action at:
http://cssglobe.com/lab/tooltip/02/ and download it from the link on http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery (it is example 2)

Tejs

Woot427 wrote: »

Liquid Hellz wrote: »

Nope, just thought it was cool. Im looking for a way to display multiple pictures on one page that isn't just a slide show type. I want to be able to have them all on one page to view so that you don't have to click on them to go to another page but also don't want to make the page to big leading to scrolling up, down, left, right. Any recommendations?

I'd suggest using lightbox. Details and examples of the effect can be found here:

http://www.lokeshdhakar.com/projects/lightbox2/

I would also google lightbox to find any other resources that may have code samples to make it really simple for you.

I like this solution. While I've personally never used lightbox, I know people that have and they like it.

Liquid Hellz

I like it alot too, looks simple enough. Ill give it a try and if I have any problems ill let ya know. Thanks!

Liquid Hellz

Never mind with what was previously here I worked past it. New problem now though is my images are loading twice in a row in lightbox. When you click next image it loads the same one again. Then you click next again and it loads a new one. Here is the code in the header(like instructions say)

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

and in the body

<a href="images/image-2.jpg" rel="lightbox[jettbleu]"><li> Jett Bleu 12,500 sq ft home of John Travolta (featured in Architectural Digest Magazine, April 2004)</a>
<a href="images/image-3.jpg" rel="lightbox[jettbleu]" title="Roll over and click right side of image to move forward."></a>
<a href="images/image-4.jpg" rel="lightbox[jettbleu]" title="Alternatively you can press the right arrow key." ></a>
<a href="images/image-5.jpg" rel="lightbox[jettbleu]" title="The script preloads the next image in the set as you're viewing."></a>

Tejs

You don't seem to be following the pattern defined in the HTML... from the source on the lightbox page, it is marked like so:

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

or

<div class="thumbnail">
	<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward.">
		<img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" />
	</a>
</div>
<div class="thumbnail">
	<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternatively you can press the right arrow key." >
	<img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" />
	</a>
</div>
<div class="thumbnail">
	<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing.">
		<img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" />
	</a>
</div>
<div class="thumbnail">
	<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press Esc to close">
		<img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" />
	</a>
</div>

Note that in addition to assigning the href attribute of the link tag the image Url, but the link itself contains an image tag with the thumbnail url.

Liquid Hellz

Yeah I modified the pattern slightly to eliminate the thumbnail picture. When i used the </div> piece it really screwed up the page. I got it mostly working, here is the page if you wanna see it. For some reason though the first image is still repeating and I can't figure out why.

http://www.southernqualityinc.com/index_files/Page573.htm

On a side note I do not like how everything is pushed over to the left on my 19" monitor. Is there a simple piece of code I can enter so that everything is centered up like Penny Arcade's main page?

Tejs

Liquid Hellz wrote: »

Yeah I modified the pattern slightly to eliminate the thumbnail picture. When i used the </div> piece it really screwed up the page. I got it mostly working, here is the page if you wanna see it. For some reason though the first image is still repeating and I can't figure out why.

http://www.southernqualityinc.com/index_files/Page573.htm

On a side note I do not like how everything is pushed over to the left on my 19" monitor. Is there a simple piece of code I can enter so that everything is centered up like Penny Arcade's main page?

Your page does not render... at all. This Link is a screenshot of what I see when I view the page. W3C sees 230 Errors with this page, so if this was generated using Publisher, you are probably much better off starting with notepad and trying it from scratch.

That said, give me a few minutes and I'll try to mock up a good sample of the script working. Hopefully, you can use that to get your content working right.

Daenris

Loads fine for me in Firefox 3. I haven't had a chance yet to go through the code to see why the first image is repeating like that.

Actually, looking at it in IE, the page loads fine, but then the ad bar at the top forces everything off to the right. If you scroll right in IE, you see the page. I also noticed that in IE the first image doesn't repeat, so it's apparently a browser specific difference.

Tejs

Here's a sample setup of lightbox that I got working on my machine.

<!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" xml:lang="en" lang="en"> 
	<head>
		<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="js/builder.js"></script>
		<script type="text/javascript" src="js/effects.js"></script>
		<script type="text/javascript" src="js/lightbox.js"></script>
		<title>Lightbox Test</title>
	</head>
	<body style="background-color: #C0C0C0;">
		<span>This is a test of the lightbox plugin</span><br/>
		<br/>
		<a href="images/image-1.jpg" rel="lightbox[test]" title="my caption">
			<img src="images/thumb-1.jpg" alt="Image" />
		</a>
		<a href="images/image-1.jpg" rel="lightbox[test]" title="my caption">
			<img src="images/thumb-1.jpg" alt="Image" />
		</a>
		<a href="images/image-1.jpg" rel="lightbox[test]" title="my caption">
			<img src="images/thumb-1.jpg" alt="Image" />
		</a>
		<a href="images/image-1.jpg" rel="lightbox[test]" title="my caption">
			<img src="images/thumb-1.jpg" alt="Image" />
		</a>
	</body>
</html>

The first image isn't being repeated twice, so perhaps you can compare to your code and see what is being omitted or perhaps included.

Liquid Hellz

My code did look a little funky although it worked. I copied yours identically and plugged in my pictures and it worked just the same(a picture repeated). It is only the first picture that is being repeated now. Before it was the first and the 5th or 6th.

Edit: yeah that godaddy ad is horrible. gotta get rid of that soon.

Also, what kind of code would I need to keep my page in the center of the browser anytime the browser is re sized? Similar to penny arcade home page

Tejs

It's somewhat of a browser hack, but this is what I use:

<html>
	<body>
		<div style="text-align: center; margin: 0px;">
			<div style="text-align: left; margin: 0px auto; [COLOR="Lime"]width: 500px;[/COLOR]">
				<span>This will be centered, put your entire page layout inside this div.</span>
			</div>
		</div>
	</body>
</html>

Change the lime CSS to the width you want the page layout to be.

Liquid Hellz

Thanks that works great, but I have to edit my index.html in notepad to get it to work. Unfortunately I can't edit source code and have it save in publisher. I would have to go edit that code with notepad on all my pages every time I changed something in publisher. Publisher sucks, im surprised it let the lightbox stuff work just by adding an html code fragment to the page.

flatlinegraphics

...publisher?

you are better off using notepad. i am dead serious. you are better off starting over.
http://www.htmlkit.com/
http://www.microsoft.com/express/vwd/
http://notepad-plus.sourceforge.net/uk/site.htm
use any of the above. all free.

you will never get publisher to do anything at all right, and especially nothing to do with websites.

and yes, to center everything you will need to re-author all of your pages, as they are structurally incapable of centering. since there is no container for your content, there is no way to center it.

for the original question, litebox, thickbox, fancybox, there are a dozen ways to do it. but first you need to fix the underlying problems, ie publisher.