Lightbox image gallery

Options
Is there any way to create a lightbox/fancybox type of image gallery in Spark? Here's an example of what I'm trying to emulate: http://www.nyghfoundation.ca/speciale...



Thanks - Patrick
Tagged:

Comments

  • Hi Patrick, and thanks for your question!



    Blackbaud NetCommunity does not have any automated way to style the images in the same way as the example you sited.



    I opened that page in chrome and read briefly through the code. It appears that the example sited is using a content management system other than Blackbaud NetCommunity on the backend. Also, there appears to be a call to specific style sheets on that site as well that appear to relate specifically to the design on that page. This tells me one of two things may be true:



    A: The 3rd party CMS which is being used in your example may have additional programming that allows pictures in a gallery to be displayed in this way.



    B: The web designer who put that page together created custom HTML and CSS coding with the specific task of getting images together on that page.



    Blackbaud makes website design services available to our customers. If this is something that you'd like to have put in place at your site, I would suggest reaching out to your Account Executive who can help get you on a path to put this together.



    Hope this helps!
  • Hi Eli - thanks for the quick response. I'm actually the author of those pages, and they are just simple HTML with the lightbox functionality added.



    I did notice that NetCommunity makes use of jQuery and FancyBox (a lightbox alternative), but I wasn't able to make use of it in my tests.



    I would be interested in seeing if anyone has successfully implemented a gallery into their NetCommunity site.



    All the best,



    Patrick
  • Using an unformatted text part, you can do the following:


    <br /><br/><script type="text/javascript"> <br /><br/> $(document)&#46;ready(function() { <br /><br/> $("&#46;fancybox")&#46;fancybox(); <br /><br/> }); <br /><br/></script> <br /><br/><a class="fancybox" href="http:&#47;&#47;yourdomain&#46;com/headerlogo&#46;gif"><img alt="test" src="http:&#47;&#47;yourdomain&#46;com/headerlogo&#46;gif" /> </a>
  • Hi Ryan - thanks very much for this. After some more testing, I was able to get the gallery working with FancyBox. Here's the final result:



    https://support.nyghfoundation.ca/nyg...



    Cheers,



    Patrick
  • Thank you for sharing, Patrick! Looks great!
  • I just wanted to chime in here also. I was also able to get a light box working in addition to a responsive grid system. This works for us to keep all of the images in a nice grid. A resize of the browser window works with the responsiveness too. I was so happy when i got this working. Here is an example on our site https://arkansasartscenter.org/stoney... (an archived page.)



    I adapted some code we from http://www.davidbo.dreamhosters.com/p... and with a little tinkering you can get it to do some nice things.
  • Can we use fancy box to pop-up a common form?
  • Hello Jesse,



    It may be possible to do this with an iframe, but it's not something we test specifically.



    Thanks,


    Ryan

Categories