0

Using Magnific plugin to try to display images in a lightbox gallery. Using {!URLFOR($Action.Attachment.Download, someId)} or /servlet/servlet.FileDownload?file={!someId} instead of the filepath, just opens the file instead of showing in the lightbox.

So am wondering if anyone knows how I can get the same functionality.

How it's supposed to be:

<li><a href="./images/image01.jpg"><img src="./images/thumb01.jpg" oncontextmenu="return false;" /></a></li>

How I have to do it on salesforce:

<li>
  <a href="/servlet/servlet.FileDownload?file={!image01}">
    <apex:outputpanel rendered="{!thumb01!=''}">
      <img src="{!URLFOR($Action.Attachment.Download, thumb01)}" oncontextmenu="return false;" />
    </apex:outputpanel>
  </a>
</li>

Any help would be appreciated.

2

Please check the Magnific documentation, you have to add a CSS class for each link where you want to have this functionality.

<a class="test-popup-link" href="path-to-image.jpg...

Then, you have to attach the magnificPopup function to each of the above links dynamically on page load.

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

Here is an example with complete code.

<apex:page sidebar="false" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){
            j$('.test-popup-link').magnificPopup({
              type: 'image'
              // other options
            });
         });
    </script>    

    <!--Here you have to use the Large image-->
    <a class="test-popup-link" href="{!URLFOR($Action.Attachment.Download, '00P0H000014v63z')}">
        <!--Here you have to use the Thumbnail image-->
        <img src="{!URLFOR($Action.Attachment.Download, '00P0H000014v63z')}" width="100" height="100"/>
    </a>
</apex:page>

Screen Capture

enter image description here

1
  • D'oh! Thanx! (Also realized the <includeScript> was acting weird so linked to CDN file) – Y12K Jul 6 '18 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.