We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Different actions for the same template-variable

    • 49667
    • 59 Posts
    ronbonqqq Reply #1, 11 years, 3 months ago
    In MODx EVO do I have a template variable [*image*].

    Related to that I have two buttons:
    1) DOWNLOAD
    2) PREVIEW

    --- When a user clicks DOWNLOAD then a save-as or open box pops up (through content disposition attachment for which I wrote code in my .htaccess file):
    <div class="box download-box"><a class="button" href="[*image*]">Download</a>


    --- When a user clicks PREVIEW then the idea is that a new browser tab opens which shows the complete image in its original size:
    <h2 class="thumb-caption"><span data-href="[*image*]" target="_blank">PREVIEW</span></h2>


    Now both buttons trigger the download... sad

    How do I get the user to see the full image when he/she clicks PREVIEW, and can download the image when he/she clicks DOWNLOAD, thus the two separate things for the same TV [*image*]?

    I recently found out about PHx and the IF-THEN rule which is pretty cool... :p
    Would that work for my problem here also? How?

    This question has been answered by sottwell. See the first response.

      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 11 years, 3 months ago
      You'll need Javascript for that. You need to tell the browser to load the image instead of trying to download it, and that means code on the browser, which means Javascript.

      The preview button would have a Lightbox effect attached to it. The Javascript prevents the default action and displays the image. There are a lot of such Javascript snippets available. I'd recommend this one, using its AJAX feature to load the image on request. http://noelboss.github.io/featherlight/

      You could also have the images all loaded, just hidden with CSS, and have the Preview button's onclick event trigger some simple Javascript to show the image. That would be a simpler solution, but would require having all of the images loaded in the browser to begin with. If they are large images and there are a lot of them, it would slow down the page load.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
      • discuss.answer
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        sottwell Reply #3, 11 years, 3 months ago
        After experimenting with Featherlight.js, I find it doesn't need the AJAX feature for this. The link to an image will load the image only when it's clicked. So that will be a perfect solution to your problem.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 49667
          • 59 Posts
          ronbonqqq Reply #4, 11 years, 3 months ago
          Quote from: sottwell at Jul 14, 2015, 03:40 AM
          After experimenting with Featherlight.js, I find it doesn't need the AJAX feature for this. The link to an image will load the image only when it's clicked. So that will be a perfect solution to your problem.

          Hi @sottwell - Perfect solution, simple, easy, lightweight and does what I need it to do. Thank you very much! Wish you a super day!.. smiley