How to make a pop-up pop up

[flip]

Acorn,

Many thanks. I'll be happy to forward a link to my site as soon as it's a site ie at present the thing resides only on my computer.

In the meantime, I've been thinking about the phenomenon I wrote about, particularly from a point of view with which I'm familiar having spent most of my working life making TV and video programmes. At present all the pages have the same mp3 lip for the test sound file. It happens to be one I recorded years ago when I ran a kids music group. The music starts almost exactly at the head of the file (bear in mind this started life as a 24track 2" tape!) although the tail has a few seconds of silence. It occurs to me that if I leave a few seconds of silence at the head of the sound files whatever is causing the phenomenon won't be heard anyway. (Modern sound engineers don't have to consider tape startup etc.)

In the meantime I'll get the samples files recorded and loaded in place, finish the paypal files edits before I do the mobile version layout. As soon as I can I'll post the link.

Thanks for all your help.

[Initiostar]

regardless of how the sound clip stops, i.e. if it's stopped part played or played through completely then cleared from the screen by the user clicking on the red dot, I hear a few notes from the start when the next page is opened regardless of whether it has any sounds on the new page or not.

Flip,

Difficult to tell without seeing your modified design. I would save your design under a different name (e.g. test.xar), retain the index page and one other that has your photos (delete the rest) and upload it to TG (using the Advanced Reply) - none of audio tracks will accessible to us in that example (without you adding them into a zip file with the design file), but we can, by adding some audio tracks test to see if we can replicate the issue you have.

However, the issue you describe should not be occur with the Xara media player. In the original example I provided, the 'red dot' should close the popup and 'pause' the audio; thereafter when clicking on another photo or moving to another page, there should be no residual audio. Whatever is on the audio track is I think irrelevant here, provided it is a true mp3 format.

Gary

[flip]

Many thanks.

This morning I've managed to reach the point at which I need only record the sample sounds and I can upload the work to the waiting webspace. If it's OK with you I'll do that and send you the link.

Again I'm grateful to you and Acorn for your help. I couldn't have got tis far without it.

Flip

[Initiostar]

Looks like a plan Flip When you publish to a live site, I would have a comment on the index page that says something like 'This site is under test'

[flip]

Gentlemen, as promised, while I invariably tweak my sites for days or weeks to come in response to the comments of friends etc, the basic site is now pretty well as is.

Please have a look at https://www.guitar-art.co.uk and see how I've applied the suggestions and help you kindly gave me.

Incidentally, most of the overlapping sound files have disappeared as I imagined they would when I left a few seconds of silence at the head of each file.

Best regards

Philip

[Acorn]

flip, I am also a tweaker but I'm glad you have achieved your goal.

I am no fan of the Xara Simple Gallery [Gallery (5 col) Widget]. In this case, I feel it destroys the impact of the site.
I tried some of your images with an Inner Zoom, which I found to be more versatile.

Feel free to ignore but here is my sampler: CSS (JS) - Guitars innerZoom.xar

Just add the Name, htmlclass="zoomin" to each of your images after losing the Xara Widget.
You could also try without the HighSlider pop-ups.

The code in in Head and Body of the Website.
It requires the special Name, UsesJQuery, somewhere added to a shape on your site.

Acorn

[Initiostar]

Flip,

I like the guitar pages and I see what you were trying to achieve now.

Like Acorn, I am no fan of the gallery widget and if I look at the flow from the index page to the gallery, you could make the purpose of the gallery (i.e. to link to the guitar pages) entirely redundant; the gallery will not transition well to its mobile variant either -it is too wide to make easy viewing.

Here's a thought: Home (index) page - either use Acorn's inner-zoom or a zoom for each guitar with a LINK to each guitar's page - that's one touch not two to reach the product you are selling and it removes the need for a guitar menu tab too. The key thought has to be how does this transition to a mobile variant:

One example: Guitars.xar - 5 guitars wide transitions to 3 wide with exactly the same pixel size; change one and it changes in the mobile variant too. It would be better if all images were the same size for future maintenance and update, but this works using Scale-to-fit Width.

I ditched the old Xara Navbar in favour 3 simple text links; Terms of Reference could reside at the bottom of the page. For the table detail on each guitar page I would use a PDF for the mobile variant too.



You are well on your way with the guitar pages, but I think there is some merit is simplifying the visitor's route to them.

Gary

[Egg Bramhill]

Great stuff Acon/Gary.

How would you go about this zoom-in effect but maintain the same border demesions. i.e. instead of the complete image zooming-in and getting larger, the zoom-in does the same zoom but remains within the original photo h & W ?

[Initiostar]

Egg,

Here is a working example using the guitars demo; scales across mobile, tablet and desktop: https://initiostar.co.uk/demo/inzoom-test/

Three steps that make this relatively easy; the first is to create a single 'photo template' with the inner-zoom code courtesy of Acorn (see the Website HTML Head for the style and Body for the script); the photo is given the Class name for the code; thereafter soft-group to make it easy to move around.



Second step is to create your photo grid on the desktop variant using the single 'photo template' - it can be any dimensions you choose.



Third step is to Share the grid with the mobile variant and transpose the grid from a horizontal format to a vertical format - the example changes from 2 rows x 5 columns to 5 rows x 2 columns. Now you can drag any images from the Bitmap Gallery and replace the current stock photo - this automatically updates the mobile variant. You can update any of the references on the MouseOver layers for each photo.



Here's the deign file: Guitars2.xar

Here's the code which includes both the zoom and inner-zoom; the red numbers are user defined.

<style>
.zoom {
transition: 1s ease-in-out;
}
.zoom:hover {
transform: scale(1.5);
}

.innerZoom {
background-size: 100%;
background-position: center center;
transition: all 1s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 120%;
}
</style>

<script>
$('.inzoom').each( function(){
$(this).replaceWith('<div class="xr_noreset " style="position: absolute; ' + $(this).attr("style") + '"><div class="innerZoom" style="background-image:url(' + $(this).attr("src") + '); width: 100%; height: 100%;"></div></div>');
});
</script>


The same design principles apply to using Xara's standard Highslide Widget - hence there is a no code option for those that prefer it.

Gary

[flip]

Acorn/Gary, many thanks for your help and suggestions. I must be absolutely frank and tell
you that while I truly appreciate your suggestions, my ability and understanding of the
technology leave me feeling I'm trying to learn a foreign language (and I did learn Mandarin
for three years when my grandchildren lived in China!).

I'm also aware of my inability to describe properly the objectives of my site clearly I failed
to do that also so I'm doubly grateful to you for your help.

Because my site and thus product range is new, I'm aware that the index page and the
'catalogue' page that follows, look similar. However I'm also aware of how the index page
design won't work in the narrow version. My intention for the index page is to provide
compelling visual/s to encourage potential customers to enter the 'shop' but avoid wasting the
time of people looking for say, pictures of guitars or material with which to decorate their
own instruments. That way I think I can overcome the gallery thing.

Longer term I don't want to have to update the index page picture/s as much as the catalogue
pictures. Those I intend to remove when sold unless their removal (rather than marking as
'sold') gives a wrong impression of the range of instruments we sell. I quite like the present
catalogue layout but propose to make a new layout to be vertically scrolled for the narrow
format catalogue page.

I fully appreciate Initiostar's comment about the nav bar but I want to give the user the ability
to switch between models quickly without having to plough through the catalogue.

Thanks too for the pdf suggestion; I was never happy with the smart table when I discovered
that it's not smart when switching between widths.

I'll re-post when I've updated and once again thank you for your help and support.

Regards

Philip