Welcome to TalkGraphics.com
Page 3 of 3 FirstFirst 123
Results 21 to 26 of 26
  1. #21
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    889

    Default Re: Revisting layer-based image gallery slideshows

    Made a quick test. Here is an example with javascript resizing limiting to original dimensions. This also works with older browsers.
    Attached Files Attached Files

  2. #22
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    164

    Default Re: Revisting layer-based image gallery slideshows

    Thanks, @siran.

    It functions incredibly.

    When I look at your JS, I come to only a vague understanding of what is happening. As a result, being able to tweak it would be impossible.

    These are exactly the kinds of things that Xara should be automating to allow us not-so-proficient designers to make awesome websites.

    Once again, and as always, your contribution is greatly appreciated.

    Greg

  3. #23
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    889

    Default Re: Revisting layer-based image gallery slideshows

    If you need some explanation don't hesitate to ask.
    By the way, I noticed clicking in IE and Edge often only works after moving the mouse a bit. I created an improved version, but the code is even more "demanding" and I changed the "link type" of the buttons and images to "open pop-up layer".
    I don't want to scare you off, so if you would like to have a look at it please drop a note.

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

    Default Re: Revisting layer-based image gallery slideshows

    Quote Originally Posted by siran View Post
    If you need some explanation don't hesitate to ask.
    By the way, I noticed clicking in IE and Edge often only works after moving the mouse a bit. I created an improved version, but the code is even more "demanding" and I changed the "link type" of the buttons and images to "open pop-up layer".
    I don't want to scare you off, so if you would like to have a look at it please drop a note.
    @siran

    Many thanks. At the risk of being daunted, I would eagerly look at your new version. I'm always willing to try to understand and happy to see what someone comes up with. Besides, even if I can't benefit from it, some other forum member certainly will.

    Greg

  5. #25
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    889

    Default Re: Revisting layer-based image gallery slideshows

    First a short description of what it does.

    Once the document is loaded the program searches for all elements that hav a HTML class startig with fix_ and manipulates those elements in the following way:
    It is assumed the element is wrapped in an <A> tag that holds the link address, in our case it should always be what Xara creates from the "open pop-up layer" and hence starting with "javascript:".
    The element (that inside of the A) is moved one level up (just before the A) and the previously surrounding A is removed, effectively "unwrapping" the element. In fact the A still exists in memory at that time but not at the document.
    Now we stop Xara fdrom handling the element (by adding xr_noreset to the class names and by removing Xaras mouse move handler.
    We add our own click handler and set a data attribute to remember to original link address.
    Then we change the style of the element to fixed positioning and to center it, set cursor to pointer and such.
    In case of prev/next button the positioning is changed a bit then. You will find a value of "10px" there, this is the distance from the window edges of the buttons. Change it if you like, but remember to also adapt the width calculation we will discuss later.
    In case of the images (class is fix_center) the element (togehter with the original width and height) is added to the list of elements requiering to be resized at browser window resizing.

    The click handler (function h(e){...}):
    When one of our elements is clicked the handler is executed.
    First it checks if the remembered link address really starts with "javascript:", if not it will just do nothing.
    Then it locates the base element of the pop-up layer the element is part of and tells Xara it was the last opened one. (This is only required because Xara gets confused about that somtimes). (It is done by pointing Xaras variable xr_pul to the layer.)
    Then it executes the part of the link after the "javascript:" which should always be something like "xr_cpu(4)" which is what Xara made from the open pop-up layer link. The 4 is the internal layer number, which by the way is the same number that is located at the end of the ID the pop-up layers have (id="xr_xp4").
    The code is executed slightly delayed (setTimeout(...,1)). This is done because somehow the process becomes instable if executed inline or with delay 0. (I don't have invesitgated why that happens, having a fix was sufficent for now I think.)

    The resize handler:
    This goes through all the remembered elements and resizes them according to current windows size. The relevant part is the calculation of the resize factor:
    Code:
    f=Math.min((xr_wx-112)/w,(xr_wy-0)/h,1)
    The 112 is the number of pixels to be reduced from the window width. In this case the buttons are 36 pixels wide and I wanted to have 10 pixels margin around them (remember the "10px" from above?). Having buttons to the left and right this results in (10+36+10)*2=112.
    The 0 is the sum of the top and bottom margin (as the image is centered the are always identical), so if you want 10 pixels marging from top and bottom enter 20 there.
    The 1 is the maximum factor of the scaling. If you (as I would do) scale the images to have 96 dpi (which avoids a separate retina image to be exported) and still want at least retina resolution you can change it to 0.5 for example.
    Attached Files Attached Files

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

    Default Re: Revisting layer-based image gallery slideshows

    Many thanks, @siran.
    A quick look confirms 1) that it still appears to function well and 2) the code will take a bit of effort to understand. I look forward to trying. And I appreciate you additional explanation to help.
    Greg

 

 

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
  •