Easy Accordion Slider Widget

[Contours]

You add the Placeholder to your page.
You add your images in their own smaller pages.
You link their filenames in the Page's code.

I'm feeling pretty dense about now.

I have my website prototype open in one Xara tab ... and I have Xara Accordian.web in another tab. Other than seeing the images, I can't follow how to merge them.

Where should the Placeholder be?
How big should it be?
What determines the widget's position on the published site?
Does the Xara Accordian.web just remain as a separate file that gets bundled when the site is published?

Regarding the photos in the pages of Xara Accordian.web, is that where my photos belong? Or do I add them as individual pages of my site and reference them from Xara Accordian.web?

I'm sure this will all make perfect sense once I've done it. But at the moment, I feel like I'm in a house of mirrors where I see possible methods in every direction (... as opposed to using the Nivo slider, for example ... where you drag it onto a page and every element is right there to be inspected or changed).

[Acorn]

@Contours
The very first page of Xara Accordion.web has a Placeholder.
You copy and paste this into your site.
For your page now holding the Placeholder, you need to insert the Page HTML head (code) that is in Xara accordion.web into yours.
All the image pages in Xara Accordion.web should be copied over as new pages in your site.
Now you have a working carousel.

You now have to change it to work for you.

The size of your images determines the size of the Placeholder and the page size holding each image.
You then replace or add pages of all your required images. Each must have a separate page name.
You need to include the file extension .htm for each page name when building your frames Array in the Page HTML code (head).
You determine the order and the time to suit your images.

Acorn

[digitalphaser]

For those who wish to modify the IFRAME here is the current detail:

<iframe src="heading 1.htm" width="760px" height="400px" frameborder="0" scrolling="no" id='ra_iframe' name="right_accordion_iframe" ><p>Your browser does not support iframes.</p></iframe>

where you change iframe src="heading 1.htm" to the first page in your list that you want the Slider to open with.

Let me know what browsers work as I get an occasional white flash on picture change.
I'm trying to remember how to make the IFRAME transparent.

Acorn

At first. The in the attributes of HTML tags do not write "px". width="650px" is wrong. Simple width="650"

Secondly. Why so difficult? Why this jQuery? This code can interfere with Xara’s Javascript.

I propose a simple solution to this IFRAME trick.

1. Create a web page (for example 640x340px) with transition effects.

Web Export Options--->Supersite-->Page Trasitions-->Scale to Fit Screen

2. Export as accordion.html

3. On the main page, create a placeholder that is equal to the accordion.html page size(640x340px).

4. Add your iframe code.

<iframe src="accordion.html" width="640" height="340" frameborder="0" scrolling="no" id='ra_iframe' name="right_accordion_iframe" ><p>Your browser does not support iframes.</p></iframe>

4. Export website.

Done! 5 minutes.

It's certainly not a real accordion, but it looks good. And you can create a lot of varints with custom options.

[digitalphaser]

By the way. I think, attributes "id" and "name" are unnecessary too.

[Acorn]

The in the attributes of HTML tags do not write "px". width="650px" is wrong. Simple width="650"

Agreed, it was sloppy coding on my part. Do note that HTML 5 no longer supports "width=pixels" It should now be style="width: 500px;". Luckily, browsers interpret such sloppy coding with aplomb.
Acorn

[Acorn]

I propose a simple solution to this IFRAME trick.
It's certainly not a real accordion, but it looks good. And you can create a lot of varints with custom options.

I may be missing something but how does the accordion you suggest actual achieve a transition?
It doesn't seem to be automatic, which is the point of an accordion carousel.
How does it recycle continuously?

Acorn

[Acorn]

Why this jQuery? This code can interfere with Xara’s Javascript.

Can you explain why jQuery code will interfere as Xara applications already invoke and run jQuery?

Acorn

[digitalphaser]

...Do note that HTML 5 no longer supports "width=pixels"...
Acorn

Yes. But Xara generates XHTML 1.0 Transitional.

[digitalphaser]

I may be missing something but how does the accordion you suggest actual achieve a transition?
It doesn't seem to be automatic, which is the point of an accordion carousel.
How does it recycle continuously?

Acorn

I created a 4 page supersite with transition effects. Then this site was loaded into the iframe.

http://digitalphaser.de/accord_iframe/

Yes. I have already said. It's more slider than accordion. But it is easy to create. Pure Xara.

[digitalphaser]

Can you explain why jQuery code will interfere as Xara applications already invoke and run jQuery?

Acorn

It's not obligatory. I experimented a little bit with JS & jQ and I had some precedents.
Sorry. I'm not ready to discuss about it.