Welcome to TalkGraphics.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Lightbulb Mosaic Photo Gallery

    For this to work, you need v16+ of a Xara Desktop application (XDA): XWD(P) or XDPX or XPro+, where Image Filename is an option.
    A shape on your page requires the special Name UsesJQuery or you have added in a Web Animation effect already: either includes the jQuery library.

    Create an images layer (I used !Photo, but that is my preference as it forces the layer to publish regardless).
    Add and lock a shape on that layer that calls the same layer: this hides everything.

    Why?
    Add any number of hires images into the !Images layer and give them all an Image Filename of "photo".

    On the MouseOff layer, create a large rectangle as a Placeholder for the gallery.
    Add the HTML code (body) of:
    Code:
    <ul class="thumb">
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo@2x.jpg)"></div></a></li>
    
    
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo1@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo2@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo3@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo4@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo5@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo6@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo7@2x.jpg)"></div></a></li>
      <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo8@2x.jpg)"></div></a></li>
       [Keep adding lines of <li>...</li>, incrementing the photo number (See *** below) each time]
    </ul>	
    
    
    <div class="thumbnail-zoomed-wrapper" style="display: block;">
      <div class="thumbnail-zoomed-image"><img src="" alt=""></div>
    </div>
    Size this box, using 170px across and 130px down for each image.

    Make sure you copy across the CSS (Page > HTML Code (head)) and JavaScript (Page > HTML Code (body)) from my example file.
    You can make the box narrow and taller and the mosaic will follow. You can readily make it fit into your Variant pages as shown in the example file.

    If you have collections of images and want different galleries, create a new !Layer for each collection and in the Placeholder and Image Filename change the name to that of the layer.

    You should now have a display with a set of 160x120px thumbnails in a cosy grid.
    When you rollover any, you get a hover that presents the image in its full dimensioned ratio. I have added a slight transparency for my personal preference.
    A further click of this open the image to 75% of your browser width.
    This is mainly designed for landscape but portrait will still work.
    I have include one example portrait image.

    JS - Mosaic Gallery.xar

    i have had to optimise the images to upload into TG.
    The reworked original code came from https://www.freakyjolly.com/image-th.../#.X5REySiYUuU.

    Acorn

    P.S. *** The photoN@2x.jpg naming is to access the Retina images. If you have Retina off, use photoN.jpg instead.
    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

  2. #2

    Default Re: Mosaic Photo Gallery

    I really like this. If I can figure out how to use it, it would make my pages that I currently have with seperate thumbnail and layer popups faster right? example https://www.jerrys-furniture.com/ash...droom-sets.htm . Thanks. (if you view it you might have to wait a bit before all the mouseover and clicks popup well.)

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Mosaic Photo Gallery

    Probably should have a close button because you cannot select under the current image. The example yellowbird linked to closes when you move away. But still and all very cool.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Mosaic Photo Gallery

    Quote Originally Posted by gwpriester View Post
    Probably should have a close button because you cannot select under the current image. The example yellowbird linked to closes when you move away. But still and all very cool.
    I didn't like the Close (X) approach but you can change the code above to:
    Code:
    <div class="thumbnail-zoomed-wrapper" style="display: block;">
      <div class="close-image-zoom" style="margin: 50px; color: white;">Close</div>
      <div class="thumbnail-zoomed-image"><img src="" alt=""></div>
    </div>
    This should work for you for the full image.
    Do add it to the Variant as well.

    If the problem is for the pop-ups, i simply move off left down across and up or similar.
    If you move the pointer across or up/down when the full image is open you get the adjacent pop-up.
    I felt the moves were more fluid (quirky) and less formulaic, which appealed to me.

    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

 

 

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
  •