# Need some web guidance - Viewing large images



## neato (Mar 21, 2006)

I'd like my customers to be able to click on my shirts and have a larger design pop up in a small pop up window. 

Here's one of my product pages...

upnorthoutfitters.com/mens_happymohawk.htm

How do I do that? I only do design in Dreamweaver, I don't know any code at all.


----------



## Calibrated (Oct 26, 2006)

You simply need to know where to get good code if you dont know your own. I have found lots of helpful codes here at Dyamic Drive. In fact there is one that would work well called litebox, comes in many versions that you could use. Its an easy enough script to install and code is very basic when used for single pictures, but it can also do whole galleries and allows for the use of text in the lower left side of the frame.


----------



## Rodney (Nov 3, 2004)

neato said:


> I'd like my customers to be able to click on my shirts and have a larger design pop up in a small pop up window.
> 
> Here's one of my product pages...
> 
> ...


Many shopping carts will add this functionality for you 

But in dreamweaver, I would suggest using one of the cut and paste javascripts like this tutorial: Popup Windows | open new customised windows with JavaScript || HTMLSource ]


----------



## neato (Mar 21, 2006)

Cool. Thanks Rodney. Now I just have to figure out how to insert it.


----------



## Rodney (Nov 3, 2004)

neato said:


> Cool. Thanks Rodney. Now I just have to figure out how to insert it.



Click on the "split view" or "code" button in dreamweaver and paste the code below the < body> tag somewhere.

Then just use the code editor function in dreamweaver to edit the < a href tag to match what they show on the site.

If you need more specific instructions, just let me know and I can throw up some screenshots.


----------



## sharps (Nov 14, 2007)

what rodney said, i dont think this would be complicated at all, what you want is another window to pop up simply displaying some text and an image. I would create a template for this new page, then link your images, and link the original image on the main page to this new page and use the reference to allow a new window to be opened. I think this is "_blank" as opposed to _parent or _self


----------



## recrisp (Oct 25, 2007)

Like Lance said, if you go to Dynamic Drive there is a lot of things there that can be beneficial to your site.
I like quite a few of their scripts they have, one in particular that comes to mind is the one where when you 'hover over' the link the image pops up.
The good thing about this type is that nobody can take your images that way, 'cause when you attempt to move your mouse to it, it'll disappear.
Imagine t-shirts in place of the images shown in the demo...
It's easy to customize too.
(I can't remember, but if someone has a pop-up remover on their browser, this may be a problem)

Dynamic Drive DHTML Scripts- Image w/ description tooltip

There are still ways to get at your images though, but the majority of the people out there don't know how, that is, if that is a concern. 

'Course, Dreamweaver is also good to make your own that come up in new windows that aren't considered a pop-up.
 
Randy


----------



## BSApparel (Nov 6, 2007)

There's a great feature that I've used in the past, called a lightbox. The code and demo is here:

Lightbox 2


----------



## neato (Mar 21, 2006)

Rodney said:


> Click on the "split view" or "code" button in dreamweaver and paste the code below the < body> tag somewhere.
> 
> Then just use the code editor function in dreamweaver to edit the < a href tag to match what they show on the site.
> 
> If you need more specific instructions, just let me know and I can throw up some screenshots.



I'm so lost. Is there a certain spot to insert the code?

Also, I already have my basic images up. With the litebox code, can I use those as a link rather than the small thumbnails that are used in the example?

Maybe I should just pay someone to do this for me...


----------



## recrisp (Oct 25, 2007)

Phillip,

I'm not Rodney, but what you might do is start slow until you get the hang of it, sometimes it can be daunting at first.

I'd go to the link above (Dynamic Drive) and go and look through their stuff, it's free.
Look at the EASY stuff, just cruise around there and look at what works in Firefox and IE, 'cause that's important.
Look for stuff that isn't complicated to put in, meaning, a really quick and easy one.
I started out that way, I know I felt that some was over my head too, then it got easier.
It's really not hard, but it can boggle the mind if we let it.

Randy


----------



## sharps (Nov 14, 2007)

personally, i see little benefit in coding a solution unless you are a programmer. I would address this by simple creating additional pages which would be a layout approach.

Is finding code solutions a better alternative and do you see it as necessary to accomplish more professional features?

dont mean to hijack


----------



## neato (Mar 21, 2006)

Thanks guys. 

I think I'd rather learn the coding. I think just making blank browser pages with html wouldn't give me the nice clean look I'm after. I like the simple compact pop ups.

That lightbox is REALLY cool, but I'm not sure that I can use my exisisting pics as the link.


----------



## Rodney (Nov 3, 2004)

neato said:


> I'm so lost. Is there a certain spot to insert the code?
> 
> Also, I already have my basic images up. With the litebox code, can I use those as a link rather than the small thumbnails that are used in the example?
> 
> Maybe I should just pay someone to do this for me...


I'm playing with camtasia video maker today, so I'll make you a little video demo of how to do it in dreamweaver after lunch.


----------



## Rodney (Nov 3, 2004)

There's no audio in this video, it was just meant to show the steps and show where you put the javascript code.

Let me know if it helps:

[media]http://www.t-shirtforums.com/videos/popzoomvideo.swf[/media]


----------



## neato (Mar 21, 2006)

PERFECT!

Rodney, thank you so much! I owe you big time. I'm going to try to put this together this weekend.

That video program is sweet too!


----------



## hiGH (Jan 25, 2007)

Scene7, Adobe - market leader in rich media for web, email & print is used on websites such as, rocawear.com, phatfarm.com, amazon.com, hsn.com.. etc.. might be worth a look.


----------



## neato (Mar 21, 2006)

Well, I did it! 

For some reason, I can get the 'click to close' function to work properly though...

upnorthoutfitters.com/mens_happymohawk.htm


----------



## lost1 (May 12, 2007)

Put the full size image right on the product page. To many clicks leads to lost sales. BTW that design is much improved over the original.


----------



## Rodney (Nov 3, 2004)

neato said:


> Well, I did it!
> 
> For some reason, I can get the 'click to close' function to work properly though...


Looks like you're missing the closing < / a > tag after the img src tag on the zoom page.

Looks good though  Glad the video helped.


----------



## sharps (Nov 14, 2007)

that was a nice video. still seems incredibly easy without code, all you included was "basic popup code" with a reference. You could also do a rollover so when they rollover the image, a larger image of just the logo is there, that way no extra windows.


----------

