News, Inspiration & Stories about our Multimedia Software

Displaying your Photos with Pop-ups and Slideshows

Christmas is a time for celebrations, family gatherings and lots of happy memories, so I’m going to show you how to share your photos on the web in an interesting and stylish way that is not just a plain gallery of photos in lines and rows.

Using Xara Web Designer it’s easy to create photo popups and photo slideshows so that just one click enlarges a thumbnail on your web page into a larger ‘popup’ version of the photo. Your website visitor can also see a timed slideshow that they can browse through and pause as they wish. If you don’t have Xara Web Designer, you can download a free trial version so you can experiment with creating your own web page.Popups8b Displaying your Photos with Pop ups and Slideshows

See the finished web page

 

Open the program and select the Designs Gallery on the right-hand side. Select Website Template Themes and choose your template design – I chose ‘Free Example’. Click the folder to view all the different layouts in that template set. Double click on the ‘Header page’ layout to select it. (You can make the page longer by simply dragging the footer graphic down the page).

 

Popups1 Displaying your Photos with Pop ups and Slideshows

 

Firstly, change the headings to personalise your web page – select the Text Tool on the left hand Toolbar then delete the default text and simply type your own text in its place. Return to the Selector Tool (the arrow icon at the top of the toolbar).

Now add a few photos by dragging them onto the page from your file explorer (or use the File -> Import menu as an alternative. Resize them by dragging on the corner handles of the photo. Position them on the page – I have overlaid my photos for a better effect. The photos will be ‘layered’ in the order that you dragged them onto the page so if you need to bring one to the foreground or move it back, then select the photo, select Arrange and choose Bring to front, Move Forwards, Move Backwards or Put to back.

Popups2c Displaying your Photos with Pop ups and Slideshows

The Arrange options

Now we will add some text to the page and wrap it around the photos. Firstly, we need to set the photos so that they repel the text. With the Selector Tool selected click-drag from top left to bottom right around the images you want to select (this is called marquee selection) ensuring that you have sufficient margin to capture them all. Right click on one of the photos and select Repelling and Anchoring then check ‘Repel text around this graphic and set the margin to be 6px which will provide a space between the photos and the text.

To add some text, select the Text Tool and create a text box area by using your mouse to drag the boundary from the top left of the column, across the width of the column and then down to just above the footer graphic. You can either type your text on the page or ‘cut and paste’ it from elsewhere and then format it using Web Designer. My text is Arial 13px with a bold heading of 16px.

Use the Selector Tool to select the text, then select Arrange and Put to Back (shortcut CTRL-B) – you will see the text automatically wrap around all of the photos. If necessary, you can adjust the width of your text area using the Text Tool and dragging one of the corner squares of the text box area.

 

Popups3b Displaying your Photos with Pop ups and Slideshows

 

Pop Ups and Slideshows
You can configure all the popup information from the Image tab of the Web Properties dialog, so click-drag to select all the images (marquee selection), then right click on the mouse to select Web Properties and click to open the Image tab.

Click the Pop-up Photo checkbox to activate it and set the width of the pop-up. I have set it to 600 pix.

Select Options, to create a slideshow that displays a series of images and to control what it looks like. I selected to dim the page whilst the popup is open, to show a shadow behind the popup and to display the image title. I also selected to show the gallery browser controls to enable website visitors to scroll through the slideshow images using the back and forward arrows. I also want them to be able to go straight to an image they like the look of using a thumbnail strip at the bottom of the slideshow and I want the slideshow to start straight away when a popup opens so that it automatically moves from one image to the other, rather than waiting for the viewer to click the forward or back arrow. As you save these settings they are applied to all the images on the web page.

Now enter the Pop-up Title and Caption for each of the photos. Select Web Properties ->Image and type in your pop-up title, which will appear in bold letters above your popup image and your caption which will display underneath the pop-up image.

 

Popups4b Displaying your Photos with Pop ups and Slideshows

 

Click the Preview current web page icon and then click on an image to see the popups and slideshow over the dimmed web page. The slideshow will start automatically, and when you hover the mouse pointer over the popup, you will see the video control bar that enables you to go to the next or previous image, pause or start the show again.

In the thumbnail strip in the lower half of the page you can click on an image to go directly to it, without closing the popup window.

To enhance the appearance of the images on the web page you could add a border and a drop shadow to ‘lift’ them off the page.

 

Popups5 Displaying your Photos with Pop ups and Slideshows

 

To add a border, select the image, then set the line width (I chose 4px). To change the color, right click on a color on the bottom color line and select Set Line Color

 

Popups6 Displaying your Photos with Pop ups and Slideshows

 

With the image still selected, select the Shadow Tool and select the shadow type – I chose a Wall shadow. Now preview the web page.

 

Popups7b Displaying your Photos with Pop ups and Slideshows

 

Hiding the Border and Shadow from your Pop-ups
If you don’t want the border or shadow to be part of the pop-up there is a work-around. It’s a bit fiddly, but it only takes a few seconds.

First, select the image, go to Web properties and Image tab to unset the Pop-up photo. Now
make a copy of the photo exactly on top of the existing one (short-cut: Ctrl-K). Now with this top copy selected still, remove the outline by setting the Line Width back to None, and remove the shadow by selecting the Shadow Tool and selecting the No Shadow icon. Now set its Web Properties to be a pop-up.

The original image under will still have the outline and shadow – (because the outline is shown half inside and half outside when you do this it will look as if the outline thickness has become half what you’d expect because the top copy is covering half the outline). Now when you preview your web page, and click the pop-up, the top copy (without the outline and shadow) is shown in the pop-up window.

This works on the web page, but if you want to re-position or resize the photo on the page, you’ll drag the top copy, leaving the lower copy behind. You might think you just need to group the top and bottom copy of the photo, but unfortunately that won’t work, because groups always show as one item in the pop-up (so you’ll get the outline and shadow in the pop-up again). There is another type of group, called a ‘Soft Group’, which is a more loosely connected set of objects. Select the menu Arrange > Apply Soft Group. This acts like a normal group so that all parts move together on the page, but for pop-ups, it uses only the top copy.

Saving and Publishing
Now save the website – select File > Save which will save your website as a .web file which is the working format for Xara Web Designer. To save the HTML files for viewing in a browser you must choose the File > Export Website menu option. This creates one HTML file for each page of your website and puts all the associated files into a folder next to this.

To publish your website on the web for all to see, you need to upload it to your web space. MAGIX provide you with 500 megabytes of web space and a personal web address for free. The process of transferring your website from your hard disk to the web server at your hosting company is called FTP upload (file transfer protocol). You need three pieces of information: Your FTP host address, your username and password. Then select File -> Publish Website, and you’ll be asked to enter those three FTP details.

See the finished website

 

Another great way to present a large number of photos rapidly is to use one of the pre-set web page templates – there are many to choose from including various gallery and montage layouts. There are also many designs of picture frames. See more information about Xara Web Designer