Background fade for pop up photos

Hi
Just bought the programme & really impressed at how quickly it allows you to get things done compared to dreamweaver etc.

one of the things i liked looking at the video preview of the programme was the function to easily create pop photos from thumbnails which could only be achieved by things like lightbox which i could never quite master.

there is one thing that i would like to add to the photo pop ups though and thats the background fading behind the photograph as it appears - just as it does when you click on the video tutorials here
http://www.xara.com/us/products/webd...torials-demos/.
thanks for the help
paul

Here's my attempt. On the popup layer create a rectangle the same size as the page then change the transparency and colour. It's not very good but it shows something like it can be done. Click on the black rectangle to pop up.

Welcome to the Web Designer forum. :)

This might work.

Place the pop up image over a larger white rectangle. Apply about 30% transparency to the white rectangle. This will let the background show through but it will be lightened.

thanks nicky & gary - i'll give it a go & let you know how i get on

If yo9u want it to actually fade, you can create a quick flash animation of the box that will obscure the background and put that as the bottommost object on your popup layer - then an the same layer, add your video on top. This way you get the transparent box, the fade effect, and the video overlay.

Does that help?

hi guys
really struggling with this. how do you get the rectangle just to appear on its own layer. i've gone into layers gallery, created the 3rd layer, selected that layer which i've named pop up layer & added the transparent rectangle to that but it still appears on all 3 layers . not sure what i'm doing wrong.

i've attached the file if it helps
thanks again

Lingo3 - I revised your attachment. Is it now doing what you wanted?

Regards, Ross

hi ross
yes thats how i want it to work but with the photo 'popping up' to say 500 px. could you tell me where i was going wring and how to get it to do the popping up as well
thanks again
pa

Lingo - I was just trying to do the popup photo + the background fade but I found I could only do one or the other.

I attach a simple example that shows how to do the 'popup photo' part. Use the browser preview to confirm it works and then note the web properties settings for the thumbnail image. The 'popup photo' setting is turned on. Try it yourself -- you'll find it easy.

Perhaps someone else can take the attached .web and revise it to also feature the desired background fade??

Regards, Ross

You mean something like this?

Cool John -- I see what you did but I don't really understand it. I can sort of 'get it' when there's just the one 'click' associated with the page. What has to happen when their is more than one clickable object on the page?

I've attached a revised version -- I think it shows some potential in the technique.

Regards, Ross

hi ross
thats just what i'm trying to do. i'm struggling to get the 'shade' part to only appear when i click on the image to create the pop up photo. i'm adding the rectangle when i have the 3rd 'pop up' layer selected but it still shows as soon as the page is previewed.
thanks again
paul

I tried adding a second thumbnail & popup photo. In the web preview both photo popups display but only the original will load the shading object. What I don't understand is how is that shading object bound or associated with one photo & not the other?

Lingo3 - all I can suggest is to look at John's (Covoxer's) last example carefully in regards to layers & web settings. Try to duplicate what he's done with a simple test page that will make it easier to get the relationships correct.

In my last example I simply edited John's example to make his 'shade' rectangle smaller, and changed the colour -- and I eliminated the transparency because I thought it looked better as a full mask than as a tint. I then typed in the caption on the shade layer & soft grouped it with the 'shade' rectangle.

Regards, Ross

hi
thought i had this when i noticed that i hadnt changed the web properties on the shaded 'pop up' part to 'pop up layer' but i've done this now & its still not working.

can anyone see why what i've attached isnt showing the shaded rectangle background when the photo pops up.
thanks again
paul

My example is not the best way to go - it works only in IE. ;)
But if it's what you need, I can think how to implement it.

Lingo3 - I don't understand why your last example isn't working. It seems to be set up just the same as mine yet they don't do the same thing in a preview. I'm using IE7.

John - do you know why my example of a popup layer combined with a popup photo works but Lingo3's doesn't? And as mentioned above how come I can't add a second pic/popup photo and still have it work?

I think it could be quite useful to have an effective way of using the popup photo feature with popup layers.

Regards, Ross

Quote:

---

Originally Posted by Ross Macintosh

John - do you know why my example of a popup layer combined with a popup photo works but Lingo3's doesn't?

---

Yes, I know. Becaue yours is modified mine, with some objects edited and some others added. But all the mechanism from my example are in place and workable. While the exapmle from Lingo3 has nothing at all to make it work. He simply has a gallery photo and a popup layer with initiation object on it. Not a single element from what I've done. :p

Quote:

---

And as mentioned above how come I can't add a second pic/popup photo and still have it work?

---

Easily, see the attached 'test-page2a.web'. But as I say, this is not the way to do it. I'll give the appropriate solution later if you don't mind.

Quote:

---

I think it could be quite useful to have an effective way of using the popup photo feature with popup layers.

---

Agree. Will be one more snippet to our collection. :D

Quote:

---

Originally Posted by covoxer

I'll give the appropriate solution later if you don't mind.

---

Something to look forward to. (I have a birthday coming up). ;)

The tweaks set is already a wonderful resource - great to see the extensibility of Xara-WD at work.

Regards, Ross

Done. Please download the latest tweak set. It contains this new tweak. :)

Lingo3 - See the attachment -- It now works. I took the info John provided and dug a little deeper on his working examples. I then duplicated in your file the relevant object names + coding.

Note that your thumbnail pic was given the name "photo1". It has a corresponding rectangle object with 100% transparency. That rectangle is located directly on top of the thumbnail - both on the MouseOff layer. The web properties for the invisible rectangle are set in the "link to web address" as

Code:

---

javascript:window.open(document.getElementById('pop_shade').href+';'+document.getElementById('photo1').href,'_self');

---

The masking shade object was given the name "pop_shade".

To test the shading appearance I added some other graphic elements that would be faded by the shade layer. So I added the text & title. I found the shading effect looked best with the white background by making the shade white too.

Note that the caption above the photo popup is just text on the same layer as the shade rectangle. The code above makes anything on that layer pop up - so it is easy to add captions after you get the layer popping up correctly.

In John's last example you can find that to add additional images will require each to have its own corresponding transparent rectangle with similar code.

Hope this helps. It would be good if others could check it in other browsers to see if it works. In IE7 it seems to work well.

Regards, Ross

Ross, you reverse engeneered it correctly. But I'll tell you again - this is not the way to go! :D
Please use the latest tweakset instead.

Indeed!

While I was preparing my earlier post you were uploading your tweak. :)

I attach an example using the tweak. Lingo3 you are going to find it much easier!

Regards, Ross

thanks a lot for all your help guys - really appreciate it

This is exacly what I had been looking for and mentioned the fact in one of my first post. Excellent work with the tweaks. How can I apply this to the whole page, so that the whole page/background are transparent.

Many thanks
Stuart

Quote:

---

Originally Posted by stuartwilson

How can I apply this to the whole page, so that the whole page/background are transparent.

---

Simply resize the shading rectangle on the shade layer to the page size.

This is what I get, i want the background fill transparent also if possible.

Stuart - note that the rectangle is on a layer the 'tweak' created for it. If you make that layer visible and editable you'll find you can resize it as desired. You can also change its shape, colour, fill or transparency. In fact you can put whatever you like on that layer -- including a caption as per my example above. It is very flexible!

Regards, Ross

I think what Stuart is asking, is how to have the -- popup shade -- layer cover the entire browser window rather than only the 'page area' boundary no matter the size of the browser window at any monitor resolution.

Yes indeed that is what I am asking. I recently discovered lightbox and liked the way it works, although difficult to implement. Through this forum I have most of what I want to Xara to do already. The tweak for tiling horizontal got me my sea scene, the photo pop animation is exactly what I want but I would prefer to shade the entire browser window. Then its just a matter of getting some sort of previous/next buttons to scroll through the gallery, maybe I will have to wait for a future update for this. I think this forum is an excellent source of information, who would have thought my question yesterday would have sparked such a debate!

Stuart

Just bought webdesigner,
I wanted to move the mouse over a thumbnail and have a larger jpeg pop up in a predefined rectangle elsewhere on the page for viewing. (without mouse clicking the thumbnails, just rolling over them..)

I also wanted this rollover action to simultaneously trigger a vector animation around the borders of the larger jpeg rectangle, the vector animation would be of coloured swirls and curls..(like swirling growing spirals emanating from the sides of the image).

Is this possible, or is it more an adobe after effects gig?

Mark, in the approach that John developed the 'shade' object he used is just a rectangle that can be resized as desired. It is essentially just a pop-up layer behind the popup photo effect. I'm thinking that instead of (or additional to) that fade you could popup a swf animation behind the popup photo and potentially achieve the animated border effect you are hoping for. It seems that your swf animation would need to have a very small file size so it would load instantly. Another thing is all your photos would have to be the same size for the fixed frame size to work otherwise things would get complicated if you needed different frame animations for different photos.

If you make something like you want work I hope you'll post it for us all to see!

Regards, Ross

thanks Ross, will do when I work it out..no doubt I`ll be back for more when I stuff it up ;)