Adding to Xara?

[Southafrican]

Would someone be able to explain to me how i add this to xara? in a place holder?
http://web.enavu.com/tutorials/makin...nice-features/
Thank you

[Acorn]

The one good thing about this (complex) code is that it worked first go!

Example site: Infinite Carousel.web

The steps are logical:

1. Create a page and add all your carousel images to it. This is a special page that your can publish anywhere. I would.
2. For each image, give it a Name using

   filename="name" - Utilities > Names...

3. Export the site.
4. Assuming your main page is called index, open the index_htm_files folder and check the filenames and extensions of all your picture assets, including the left/bar carousel images.
5. On the page where you need the Carousel, add the Placeholder code I have used in HTML code (body) for my red rectangle.
6. Change the filenames and paths in the UL list to yours and add or remove LI items as needed.

Copy the Web Properties > Website > HTML Code (head) code in my example site into the same location for yours.

Read the original website for parameters and image sizes; it's not my code.

Job done.

Acorn

[Southafrican]

Thank you!!!!! got it working!
BUTTTTTTTTTTTTTTTTTT
I know you said to check on the site, but i cant seem to find it, and i was hoping...
Is it possible that i can change the size of the images on the widget? that its 110px by 110px maybe? inside of these rectangles?
ALSO why do my .png images now have big black boxes around them?
IM SORRY THAT IM SUCH A PEST :P

The one good thing about this (complex) code is that it worked first go!

Example site: Infinite Carousel.web

The steps are logical:

1. Create a page and add all your carousel images to it. This is a special page that your can publish anywhere. I would.
2. For each image, give it a Name using
3. Export the site.
4. Assuming your main page is called index, open the index_htm_files folder and check the filenames and extensions of all your picture assets, including the left/bar carousel images.
5. On the page where you need the Carousel, add the Placeholder code I have used in HTML code (body) for my red rectangle.
6. Change the filenames and paths in the UL list to yours and add or remove LI items as needed.

Copy the Web Properties > Website > HTML Code (head) code in my example site into the same location for yours.

Read the original website for parameters and image sizes; it's not my code.

Job done.

Acorn

[Southafrican]

I actually answered my own question here sort of, but iv attached a image of my problem?? please help?

The one good thing about this (complex) code is that it worked first go!

Example site: Infinite Carousel.web

The steps are logical:

1. Create a page and add all your carousel images to it. This is a special page that your can publish anywhere. I would.
2. For each image, give it a Name using
3. Export the site.
4. Assuming your main page is called index, open the index_htm_files folder and check the filenames and extensions of all your picture assets, including the left/bar carousel images.
5. On the page where you need the Carousel, add the Placeholder code I have used in HTML code (body) for my red rectangle.
6. Change the filenames and paths in the UL list to yours and add or remove LI items as needed.

Copy the Web Properties > Website > HTML Code (head) code in my example site into the same location for yours.

Read the original website for parameters and image sizes; it's not my code.

Job done.

Acorn

[Acorn]

You provided the site in your first post.

You would need to look at the code and CSS to change the Carousel sizes.

PNGs have black around as black is the slide holder's default colour and if your image sizes are not the same as the holder. you will see the gap.

For you last problem, you may need to lengthen the carousel red rectangle.

For detailed answeres, post to the creator of the carousel.

Acorn

[Southafrican]

NOTE! i just found out it actually works!!! perfectly!! i was previewing it in xara, when i preview`d in crome it works 100% Thanks mate!

[Southafrican]

NOW! a hard question, how do i add a link to these images?? that if someone clicks on them, they will be taken to selected page?
Also i need to place more then one on one page? how would i do that without messing up the scripts?

[Acorn]

NOW! a hard question, how do i add a link to these images?? that if someone clicks on them, they will be taken to selected page?
Also i need to place more then one on one page? how would i do that without messing up the scripts?

In the Placeholder, where you added the URLs to your pictures, c.f.:

<ul id='carousel_ul'>
<li><a href='#'><img src='index_htm_files\apple.jpg' /></a></li>
<li><a href='#'><img src='index_htm_files\architect.jpg' /></a></li>
<li><a href='#'><img src='index_htm_files\bananas.png' /></a></li>
<li><a href='#'><img src='index_htm_files\ball.png' /></a></li>
<li><a href='#'><img src='index_htm_files\wrenches.png' /></a></li>
<li><a href='#'><img src='index_htm_files\plane.png' /></a></li>

</ul>

You need to add the URL to your web page or anchor, replacing the hash (#).
Each link would be similar to: <a href='page.htm' target='_blank'>.
You have to take over the job that Xara does for you.

Again, not my worry about running multiple Carousels, you must ask its developer.
I imagine it would involve a lot of rework as (s)he chose to use a hard-coded ID of #carousel and did not make his code into a jQuery function.

Acorn

[Southafrican]

I do imagine that if i then change it to #carousel1 , #carousel2 it should work individually?
Thanks for the help with the links! going to try it out right away

[Southafrican]

think i miss understood,
<a href='Whatgoeshere.htm' target='_andwhatcomeshere'>.
i put my page name, in at "whatgoeshere" and crashed my xara :/