Apologies if this is already in another post. I've searched, but can't find the answer.
What I am trying to achieve is the ability to add an image to a page, and that once published if the image is clicked a larger version of the image is shown.
The following website might explain the problem better.
http://www.petraweb.net

Most of the images on the site are clickable and the visitor is taken to an enlarged version of the image and then upon clicking this they come back again.

The CMS system for this site was hand written some 10 years ago and I'm wanting to update it to use Umbraco. However the current CMS makes it very easy to deal with the images as upon adding an image there is a tick box to specify is the enlarged image should be shown if clicked.

I hope all that made sense.

I've tried to achieve the same thing by creating a new Media Type, but I can't really find where to start with this. I've also tried to create a Macro, but it does not behave properly in the Rich Text editor as a normal image would. I've yet to try a user control, but again I suspect that it won't behave as an image would in the editor.

So many websites allow you to click on an image to enlarge it that I'm sure one of you guys has this licked already. At least I hope so.

Any help greatly appreciated.

Cheers

Steven Wilber

P.S. Once I get my blog going I'm going to do my own "where to start in the Umbraco jungle" guide since it is very confusing for the Umbraco newbie, even for an experienced programmer such as myself.

---

Web Site Design - Essence Design

Steven - I've only been using umbraco for a short period so my novice approach may be different than the veterans but initally I would think you could easily do this through a macro. have the macro store something like the fields below:

-item id (text) <- if you want to wrap in individual div or other element to apply styles
-thumbnail width (number)
-thumnail height (number)
-image (media picker)

then in the .xslt have it render the image html using the thumb dimensions and also create a popup href link to the full image or if you want to get fancy via styles... and also have it render in the content editor so you can see while editing content... I may actually write a package to do this now that I've thought about it - could be neat but there may already be something out there already...

That sounds helpful.
That was actually my first attempt, but maybe I was not good enough as in the richtext editor it just showed an orange dotted box saying that the macro cannot be displayed.
However even if the macro can be displayed I don't think that it will react like an image, i.e have the image drop down menu, so maybe some other options are needed, such as:

- align [left|right|none]

Also I doubt then that the image can be resized in the way that the current image can be. Maybe I need to dip into the source code and extend the existing image code to do what I want to do.

---

Web Site Design - Essence Design

Okay, that requires a bit of XSLT'ing, hope you're prepared to get your hands dirty :-)

Here's how I would approach to problem:

Create a new DocumentType, call it DocumentImage or something like that.

Add an upload property to the DocumentType, this is where you'll "store" your image. You can add image text properties etc. too if you want.

Make an associated template for DocumentImage that displays the picture inside your sites main template, and add a window.history.back (or whatever it's called) javascript onClick function to the image. Just as it's done in your example.

Allow DocumentImage to be created as children of textpages.

Create a new XSLT-file with an associated macro. This one is used for inserting the image inside the content.

Add a contentPicker parameter to the macro (for choosing the image), and check both "Use in editor" and "Render in editor".

Now go to the XSLT-file and have it display a scaled down version of the image supplied as a parameter using ImageGen.

Now all that the editor needs to do is to add his/her images as children to the textpage, and afterwards insert the images inside the textpage via the macro. You can actually place the images anywhere you want (the contentPicker can pick any content), but for organizational purposes I think it would be better to place them under the associated textpage.

Hope this helps guide you in the right direction. But prepare for some work, and perhabs even frustrations if you've never done XSLT before. The system is absolutely brilliant if you know how to use it, but takes a bit of learning curve if you don't.

---

Brug for råd til hvordan du driver en god webshop? / Need advice on how to run an effective webshop?

Steven:

I just finished up the first run through. I can package this up and give you a copy if you like. I also tested this under windows IE 6 & 7, Netscape 8.1, FireFox 2.0 and it works fine on all of them. Current features include:

-all macro, css, xslt, javascript based
-styleable windows
-fadeable big image popup (fade in on click/fade out on click)
-draggable big image popup

Also below are some various snapshots of the current version:

Editor Snapshot:


Macro Snapshot:


Rendered Output #1 (default view):


Rendered Output #2: (on click fade in)


Rendered Output #3: (full image view - draggable window)

Fantastic!!

You are way ahead of me.
If you could package up the code that would be brilliant. I'd love to have a look through what you've done.

I'm not sure how you would send it over to me, but my email address is steven at essence-design dot co dot uk.

Cheers

Steve

---

Web Site Design - Essence Design

Would it be possible to get the source for this wonderful example. I am new to umbraco and am struggling with the exact same problem. username at gmail.com

Regards,
William

Ever thought about using lytebox?
Easy to implement and works the same. It even has the ability to open a URL like it opens an image.
Can show an example yet, but I am using it in 2 sites I am buidling at the moment.
Check here for info:
http://www.dolem.com/lytebox/

Cheers,
PeterD

---

Working on an events-calendar with recursion. Post requests on my blog!

I have the code for the lytebox working but have found a problem. The lytebox blacks out the calling webpage, but in this case does not paint over the sIFR rendered text on the page. Very distracting.

appears to be a workaround...

http://www.dolem.com/forum/showthread.php?tid=151