Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Lightbulb Simple Gallery with Animation

    I was in a hurry for a simple gallery and didn't want to use another Widget.

    In the end, all the code is in the Link of the Thumbnail.

    Create a Gallery space with a large image.
    Give it a Name. I used 'large'.

    Take a large image and give it a Name. Here, I used 'one'.
    Create some sort of Thumbnail.
    Add your Thumb Link of form: javascript: void $('#large').slideUp('slow', function(){$(this).attr('src', $('#one').attr('src')).slideDown('slow');})
    Repeat for each new Image/Thumb.

    I usually hide my large images in a pop-up !Layer.

    JS - Simple Thumbnail Viewer with Animation.xar

    The links require jQuery to be loaded.
    Mine happens to be a text line with a Name of UsesJQuery on the MouseOver Layer.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,847

    Default Re: Simple Gallery with Animation

    Nice.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Mar 2009
    Posts
    4,294

    Default Re: Simple Gallery with Animation

    Simple but nice and smooth.

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: Simple Gallery with Animation

    Here's one using your technique Acorn. Thanks

    DEMO
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: Simple Gallery with Animation

    Quote Originally Posted by Egg Bramhill View Post
    Here's one using your technique Acorn. Thanks
    DEMO
    Egg, thak you for this. It shows (hides) a lot of possibilities.

    My preference is the shutter, slideUp/Down but as it is using jQuery you can also build your own using the animate() method: https://www.w3schools.com/jquery/eff_animate.asp.

    Remember, you can also change 'slow' to any millisecond value instead.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

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
  •