1 Attachment(s)
Developing the Highslide capability
I am annoyed with the way Xara implemented the Highslide pop-up capability:
- The pop-up effect is acted on a given image such that you just see the same image much bigger.
- The Pop-up image cannot be given a proper Image filename.
This limits matters when setting up an image grid where you want to save space a trim back when is in the thumbnail but still render the fuller image in the pop-up.
The following design overcomes the first problem:
- Create your Thumbnails and Pop-up Options as normal.
- Give each a ClassName of "tnn", where nn is a number. Actually, you can use anything you like, just keep each different.
- Make as small as you like as they are now all hidden in the !Thumbs layer. There is an extra locked shaped them that simply Links to the same layer: this hides them but they still get published.
- On MouseOff, or any visible layer, add the special Link of javascript: void $('.tnn').parent().click(); - N.B>, the preceding dot is necessary.
Here are a number of examples:
:pointAttachment 128204
Happy to explain how any of the effects are realised.
Acorn
1 Attachment(s)
Re: Developing the Highslide capability
Hi Acorn,
I really don't get this - on your original, I've taken away everything trying to see what the "guts" of the page is and it works just fine.
I then duplicated the page, deleted your images and placed 3 of my own and gave them the sames names - now it doesn't work! Really frustrating.
Once I get the basic version to work, I'll see how quick and easy it is adding say 30 images.
Attachment 128206
Re: Developing the Highslide capability
Acorn - You should be working at Xara.
Re: Developing the Highslide capability
@LGF it all works as expected for me : https://initiostar.co.uk/demo/HiSlide/
One of the original images has a second name of "UsesJQuery" - I simply added another object with that name.
Re: Developing the Highslide capability
Quote:
Originally Posted by
letsgofishing
Hi Acorn,
I really don't get this - on your original, I've taken away everything trying to see what the "guts" of the page is and it works just fine.
I then duplicated the page, deleted your images and placed 3 of my own and gave them the sames names - now it doesn't work! Really frustrating.
Once I get the basic version to work, I'll see how quick and easy it is adding say 30 images.
Attachment 128206
Your atached file doesn't have anything on MO/O layers to fire up the Highslider display.
I did forget to mention the calling Links expect jQuery and I slipped a UsesJQuery Name into my design early on - Initiostar (thanks) spotted my oversight!
Also jQuery was activated on mine as I had used Web Animation on the two beach images.
Acorn
Re: Developing the Highslide capability
Quote:
Originally Posted by
gwpriester
Acorn - You should be working at Xara.
Gary, well someone should.
Acorn
Re: Developing the Highslide capability
Quote:
Gary, well someone should.
:)
Re: Developing the Highslide capability
the second part of my play is a little complex but worth it.
Presently, you as stuck with a Width of the Pop-up that can be set individually.
Tedious but all right.
What you cannot affect is the Image Filename of the pop-up.
Here is my workaround:
- On the !Thumbs layer, change the pop-up Width of all the images to a paltry 64px. This doesn't matter as you are going to replace them on the fly.
- Note the ClassName of each - I used tnn.
- Add the following jQuery statements to the Page code (body):
Code:
$('.t01').parent()[0].href = "../images/index_htm_files/pb1@2x.jpg"
$('.t02').parent()[0].href = "../images/index_htm_files/pb2@2x.jpg"
$('.t03').parent()[0].href = "../images/index_htm_files/pb3@2x.jpg"
$('.t04').parent()[0].href = "../images/index_htm_files/pb4@2x.jpg"
$('.t05').parent()[0].href = "../images/index_htm_files/pb5@2x.jpg"
These new images can be published in a separate Xara design file with proper Image Filenames instead of just pbnn.
If you have originals at 9000 x 6400px size, they will present in the Highslide viewer at that size so you need to publish through Xara or resample to the width you need.
I would not recommend putting them into an !Images layer as Xara then has them as part of the design file; keep them separate (they can be anywhere).
Acorn
1 Attachment(s)
Re: Developing the Highslide capability
Quote:
Originally Posted by
Initiostar
@Initiostar -so I add "UsesJQuery" as a second name on one of my pics?
OK, I've added a rectangle to the Mouse Off layer and has a name : UsesJQuery. - Makes no difference...
@Acorn - file has mouse off layer - I've added a Mouse over layer to the "View Slide Show" - still no difference...
Finding this very frustrating....:confused:
Re: Developing the Highslide capability
Quote:
Originally Posted by
letsgofishing
@Initiostar -so I add "UsesJQuery" as a second name on one of my pics?
OK, I've added a rectangle to the Mouse Off layer and has a name : UsesJQuery. - Makes no difference...
@Acorn - file has mouse off layer - I've added a Mouse over layer to the "View Slide Show" - still no difference...
Finding this very frustrating....:confused:
LGF, you didn't apply Image > Pop-up to the very thing needed to launch the Slideshow.
On !Thumbs, select the third image, ClassName t03, and tick Photo pop-up in Web Properties > Image.
It then works like a charm.
Acorn