Want Photo's to Zoom 
Auteur : Micky R.
Visité 1887,
Followers 1,
Partagé 0
I want to have a family website with some text but mostly photos on each page. How to I create the page with 9 photos so that when the cursor passes over it - the pictures are zoomed to a larger viewing size?
Posté le
Hi Micky,
Although there are a few effects built-in to the Image Object in Website X5, zoom on mouseover is not one of them (as far as I am aware). It is possible to arrange your page so that images are enlarged when the user clicks on them: however this is not quite what you want.
You will need custom code for this, probably Javascript, which you can incorporate into your page in various ways using the options available in X5.
There are numerous examples of suitable code on the web. You could probably cut and paste most of them and they would work with only minor tweaks to your image filenames, etc.
A common technique is to use two different sizes of the same image. The original image is replaced by the larger image when the javascript detects the mouseover event.
Best regards,
Paul
Auteur
Paul - so if I just them enlarged when clicked on, how would I that? Are there any templates that already have that set up?
Here's how I would do it personally:
Place each picture/photo on your page using a separate Image Object for each one. Be sure that the 'Display Mode' (listed on the Display tab in the Image Object properties) is set to 'Automatically resize image'
Then move to the 'General' tab in the Image Object properties. Select 'File or URL with ShowBox' from the 'Link' drop-down menu - then set the path to use exactly the same image file. You can adjust the size of the zoomed image using the 'ShowBox Properties' on the same screen.
You can check and tweak the results in preview mode... no need to upload the project.
Auteur
Perfect! One last question - is there a way to use Image Object and have a text caption displayed - or do I need to add the 'caption' to the photo?
Auteur
Also how does ZOOM and TEXT work because it displays the TEXT but the image goes away.
There are a few ways I can think of to associate caption text with an image:
1. Use the Watermark feature in the built-in Image Editor
2. Add 'Description' text to the 'Tip on mouse over' field in 'Link' properties (General tab in Image Object properties) - note that you don't need to set an actual link for the text to appear, but the user does of course have to hover the mouse above the image. However, you may like that effect
3. Set the Cell Style of the Image Object to hold a text caption. Enter your caption under 'Content' on the 'Text' tab of the Cell Style properties
4. Create a separate Text Object for each Image Object, and arrange them left, right, up, down on your page as desired
Zoom & Text is a special effect which might be used for example on an ecommerce site. The customer sees an item which takes their interest... they click on it, the image disappears, and they are presented with a list of features, specifications, price options, etc.