Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 26
  1. #1
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Revisting layer-based image gallery slideshows

    Hello all and happy Friday

    I’m working on a layer-based image gallery slideshow. It is almost completely stolen from ideas here on talkgraphics, particularly from Acorn, one which he named lucky-theee-dragon (based on a highslide idea from another poster… sorry not to have the name). Unfortunately, I have not been able to locate the thread.

    The concept is not complex, but ingenious in developing your own image gallery with a slideshow, using page layers accessed via popups.

    I have added a little to the mix, as you can see in the attachment if you’re interested. (If either of these has previously been done here, my apologies.)

    layer slideshow.web

    1) I wanted a full-page transparency under the lightbox image when it opens. To accomplish this, on each layer I added a placeholder with a simple div:
    Code:
    <div class="modal-scrim"></div>
    You can see the CSS is in the website head html.

    2) I wanted to make the lightbox images clickable to advance to the next image, so I copied the link code from the Next arrow:
    Code:
    popup: open "Image2" close "Image1"
    And I wanted to make the transparency clickable to close the lightbox and return to the image gallery. So, I added the link code:
    Code:
    popup: close
    It seems to work well, and it accomplishes what I set out to do.

    * I would like to ask if anyone might share their ingenuity to accomplish the last thing I would like:

    Ideally, when the lightbox image opens, it should be in the center of the browser window. Scrolling can occur behind, but the image itself should remain fixed.

    Unfortunately, Xara attaches a coordinate location to the image which I have not found a way to override. I attempted to use CSS to center it (position: fixed; left: 50%; top: 50%; transform: translate (-50%, -50%)) but the code calculates the position based on the coordinates already assigned to the image, i.e., where it is physically inserted on the page, rather than relative to the window. (In fact, it is sent to the corner.) (I tried other position attributes as well, but all give screwy results.) The location that Xara automatically generates seems impervious.

    Would anyone have ideas on how to overcome this?

    Many thanks in advance.

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Revisting layer-based image gallery slideshows

    Hi Greg,

    Take a look at https://barnesbowling.org.

    Scroll down a bit past the booking system and there is an example on the left of the page where each thumbnail brings up an enlarged image in the same position each time.

    You can apply any effects you want to both the thumbnail and its enlargement. Each thumbnail is soft-grouped with its corresponding enlargement; each enlargement is on its own layer.

    You can create any number of different and reusable configurations and layouts.

    Gary

  3. #3
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Revisting layer-based image gallery slideshows

    Thanks for the insight, Gary!

    Your gallery works well. What I'd like is to have it open up more full-screen, as in a lightbox slideshow. The problem is being able to center it and make it fixed when the user scrolls. Actually, the latter is needed more for when the user clicks a thumbnail further down the page, so the full image doesn't show up too high up.

    Greg

  4. #4
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Revisting layer-based image gallery slideshows

    I think I’ve arrived at a solution… perhaps not the most elegant or easiest, but it seems to work.

    The trick seems to be to convert the lightbox images (on the individual layers) into placeholders that reference the actual image files.

    The code I placed in the placeholder body html is:
    <img src="index_htm_files/***.jpg"
    style="position:fixed;
    object-fit: contain;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:1500px;
    max-width: 80%;
    max-height: 80%;">

    You have to make sure the image files are in the index_htm_files directory. This can be accomplished by putting them in a “junk” page and giving them the appropriate names. I noticed that drag / dropping the image onto a rectangle doesn’t work… apparently Xara has a bug of not allowing naming (via Name > filename="***" or the new Web Properties > Image Filename feature). The export assigns a numerical filename that overrides what you put in. BUG REPORT!!! But if you drag and drop the image directly onto the page board, naming it is possible.

    An extra benefit to this method is that you can also make the image responsive to the size of the user’s browser (the code with the max-width and max-height).

    As it is late, I am stopping my experimenting. Tomorrow I will see how well Xara responds if I assign the placeholder a class and move the style coding into the website head html. Fingers crossed.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,745

    Default Re: Revisting layer-based image gallery slideshows

    Quote Originally Posted by gcellison View Post
    Thanks for the insight, Gary!

    Your gallery works well. What I'd like is to have it open up more full-screen, as in a lightbox slideshow. The problem is being able to center it and make it fixed when the user scrolls. Actually, the latter is needed more for when the user clicks a thumbnail further down the page, so the full image doesn't show up too high up.

    Greg
    Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.

    I assume you are after something like http://walter-pall.de?
    It was referred to by HiSlide as a showcase site and is very clever; I don't know how it all fits together but I am citing it as an example of what you are after.
    It might be flexbox.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Revisting layer-based image gallery slideshows

    Quote Originally Posted by Acorn View Post
    Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.

    I assume you are after something like http://walter-pall.de?
    It was referred to by HiSlide as a showcase site and is very clever; I don't know how it all fits together but I am citing it as an example of what you are after.
    It might be flexbox.

    Acorn

    Thank for the link, Acorn. It looks very interesting. I will check it out.

    The type of image gallery lightbox slideshow I'm trying to make is in fact very standard. And example would be something like THIS. In fact, it's somewhat similar to the ones you've designed in the past, except that I want to add and change a couple of details as mentioned above.

    I did use HighSlide in the past (as it is built in to Xara's slideshow option), and even customized it as much as it would allow. But my goal is to get the slideshow website-internal and once I have it functioning using page layers, to be able to customize it further.

    Thanks again.

  7. #7
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Revisting layer-based image gallery slideshows

    Quote Originally Posted by Acorn View Post
    Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.
    Acorn, I checked out the thread you suggested. A very interesting development of the idea between you and siran. It may help in my objective. Thanks.

  8. #8
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Revisting layer-based image gallery slideshows

    Hi again. For anyone interested, I’ve finished my project. The result is attached.

    layer slideshow revised.web

    I’m not a web designer, and my knowledge and experience remain limited. Nevertheless, as others on the forum are extremely generous in sharing their work, I thought I’d do the same. If it turns out to be banal, my apologies.

    Much credit to Acorn and others who have developed the idea of image galleries using layers in the past.

    Objective:

    - A thumbnail image gallery that opens up a larger image whenever a thumbnail is clicked.
    - The full image has a transparency behind it covering the entire browser window.
    - The full image always stays in the center of the browser window. It is at the full size designated provided that it fits within 80% of the width and height of that window. Otherwise, it shrinks to 80% of the smaller dimension. The size change is responsive if the window is resized vertically or horizontally.
    - Though the page (still visible behind the transparency) will scroll up and down, the full image does not scroll, but remains centered. The arrows to the previous / next image also remain stationary.
    - Clicking on the full image advances to the next image (like the next arrow). Clicking on the transparency closes the lightbox and returns to the image thumbnail gallery. (Note, clicking on the transparency close to the image can trigger the “next” function.)

    A (hopefully sufficient) explanation of the methodology is shown in the project file (page: information).

    Is there a benefit of this method over using HighSlide (the built-in photo popup image slideshow used by Xara)?
    It depends on your perspective and your objective.
    - HighSlide is great to generate an image gallery slideshow (more or less) automatically just by clicking it in the web image properties. The options are very limited, so there's little to consider.
    - By default, HighSlide allows displaying the image title and / or a caption, dimming the background, showing controls, and making the slides advance automatically. The text has a fixed format and location which cannot be altered, nor can the background dimming.
    - HighSlide opens the full image over the thumbnail clicked and the following images remain in that position until something provokes a movement (e.g., if a subsequent image is bigger than the browser window). The images open at the full size designated unless the browser window is too small. Adjusting the window does not affect the current image but advancing to another image will resize the modal. (I.e., it is not truly responsive.)
    - When a full image opens in HighSlide, its position is not fixed. It will scroll up or down, which is generally not desired for image galleries.
    - The default HighSlide browser controls are small and awkward, and frankly look very early-2000s.
    - There are a few modifications that can be made to the appearance, but they require additional work that is not native to Xara.

    - The current method requires much more work, but it allows greater flexibility in design. It is appropriate for someone with the time and inclination to put in the extra effort. Text, graphics, etc., can be added directly to the image layer. The text can be formatted and placed however the designer likes… not limited to defaults. Enhancements to the image (e.g., borders) can be added on the “junk” page, etc. Acorn shares some of these possibilities in The Ultimate Xara Slideshow.

    - The full images are completely responsive. If the browser window is resized, the image will shrink or grow as determined by the parameters that the designer defines.
    - The full images always stay centered. They do not scroll, though the page beneath does.
    - Like HighSlide, the current method is highly compatible with variants.
    - Though not developed here, automatic advancement through the slides is possible. In fact, I believe it was developed in the thread referenced above.

    Finally. Yes, I am aware that there are numerous JavaScript slideshows available on the internet. I found drawbacks to them.
    - First, the images have to be uploaded to the slideshow and are not part of the Xara project. If your make changes to the images (reclip, change enhancements, etc.), the altered images would have to be re-exported and then re-uploaded into the slideshow. With the current method, the changes are made in the project and pass to the image gallery automatically. As they are part of the Xara project, the images here are also automatically optimized on export, etc.
    - Secondly, the JavaScript slideshows found on the internet generally require an external reference (e.g., the JQuery file that makes them work.) The current method is entirely internal to the web domain.
    - Thirdly, the JavaScript slideshows are problematic with variants. Using them requires a fairly good knowledge of JavaScript.
    - Which is also the fourth reason: my JavaScript knowledge is NOT fairly good.

    My great appreciation to anyone who takes the time to look the work over. Any comments on problems, oversights, or things that could be done more easily, will be most welcome.

  9. #9
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Revisting layer-based image gallery slideshows

    Just finished a similar example based on your first one. It uses the "htmlclass=..." name, but it requires some code. On the positive side is that it also scales up.
    Have a look if you are interested and don't hesitate to ask for details.
    Your example also has a problem that the container potentially is larger than the image which leads to clicks on some parts of the background don't close the image but advance to the next. Try it by adding a border-style: solid; to the container style.
    Another disadvantage of my example is that you would have to add a new class name for every aspect ratio you use for the images.
    Attached Files Attached Files

  10. #10
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Revisting layer-based image gallery slideshows

    Here is an example with two aspect ratios.
    Changed the CSS a bit which also required to adapt the code.
    Attached Files Attached Files

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •