Changing the Simple Gallery Lightbox [Advanced]

Follow

Comments

16 comments

  • Avatar
    Mike Cox

    I just tried this with fancybox2 and it works great!  Thanks for the tutorial.  I am trying to make sites responsive and fancybox2 works good for this.

  • Avatar
    Scott McCulloch

    Mike - how do you go about the licensing for Fancybox2, they say on the site if you use it for commercial purposes that you need to pay?

  • Avatar
    Mike Cox

    To be perfectly honest, I never noticed... I will go read up on it.

  • Avatar
    Intelligent Netware

    Scott, do you know of a way to get a link connected to a photo? We want to send the viewer to a store to purchase the image. Any thoughts using either fancybox or the lightbox?

  • Avatar
    Intelligent Netware

    And how can we get the 'latest module' to display the image in fancybox? I keep getting the lightbox rather than fancybox

  • Avatar
    Paris

    Hello,

     

    I follow the instructions and it did not work for me - http://www.up2datepromotions.com/Products.aspx - What I am doing wrong? Regarding point 4, I paced the code in the modules's settings/advance settings/Footer - is this correct? 

     

    I uploaded the fancy files in the folder which you can see here www.up2datepromotions.com/portals/0/scripts/simplegallery/jquery.fancybox.pack.js?v=2.1.2 

    Can you please advice?

     

    Thanks

     

  • Avatar
    Mike Cox

    Did you do step 5?  That is one step I forget every time.

  • Avatar
    Paris

    Yes I did. I also downloaded the latest version of simple gallery module. I really do not know why as I followed each step

  • Avatar
    Mike Cox

    If you want to inspect the code of one of my projects:

    http://www.marina.ca/Media/Photos/tabid/88/AlbumID/425-83/Default.aspx

    In looking at your source, I see that you have jquery.min.js included twice.  Make sure "include jquery" is turned off in Ventrian Gallery Settings.  Ty using Hosted jQuery in DNN host settings and remove the jquery reference that is in your skin.

    Just guessing...

  • Avatar
    Paris

    Hello Mike,

    Thanks for the support. I did both, turned off include jquery in the Ventrian Gallery Settings and turned on Hosted jQuery in DNN host settings but still I do not see the effect - strange

  • Avatar
    Mike Cox

    I seem to remember having the same thing happen on another site and I never did persevere to find the solution.  I hope you find the answer, I have to go out now but I will try to look more into it.

  • Avatar
    Mike Cox

    I see that I am running Facnybox v2.1.3 and you are running V2.1.2.  When using Inspect element in Chrome, there is an error showing on the fancybox.js script but not on mine.  I did a quick google search and found this thread:

    http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

    It could be a jquery version issue.  I see that jquery is included on line 3 of your source code and again on line 34.  The one on line 34 is included with your skin probably to make the menu work.  Why don't you try renaming this file: /Portals/_default/Skins/CS.StarSkin_1_1_0/StarStyle1MenuTheme/js/jquery-1.3.2.min.cs.js to see if it makes the problem go away.  By my simple way of thinking, your menu should still work even after renaming that file because jquery is included on line 3. And if your gallery starts to work, then we know.  

    I think there is a FancyBox v2.1.4 now too, so try an upgrade.

  • Avatar
    Intelligent Netware

    This works for me - although it takes great 'attention' to paths and such. Compare Scotts example with the notes here: 
    http://fancyapps.com/fancybox/#useful

    The only difference is the version and paths.

    Thanks for the help everyone.
     

  • Avatar
    Intelligent Netware

    Currently, the (PHOTOPATH) token doesn't work in the 'LATEST' module, but you can form the path using the (FILENAME) token. 

    FANCYBOX GALLERY PHOTO TEMPLATE
    (a href="(PHOTOPATH)" class="fancybox" rel="gallery1" title="(TITLE]")(img src="(THUMBNAILLINK]")(/a)(br /)(EDIT](span class="h4book")(TITLE](/span>

    FANCYBOX LATEST PHOTO TEMPLATE
    (a href="/portals/0/gallery/album/2/(FILENAME)" class="fancybox" rel="gallery1" title="(TITLE)")(img src="(THUMBNAILLINK)")(/a)(span class="h4book")(TITLE)(/span)

    swap out the < and [ brackets for the tokens and anchor, etc. 

     

  • Avatar
    ron dyar

    I had trouble getting this to work because I was lazy and rather than login to the server and copy the unzipped files I uploaded the zip folder thru DNN and told it to unzip the folder - it did, except it did not extract the .js file. While inspecting the source in chrome I clicked the link to the .js file and noticed there was nothing there, and then double checked the folder in DNN and sure enough it unzipped everything except the .js file. I logged into the server and extracted the .js file and now it works. Using it in the latest module as per Mr. Intelligent Softwares' post above. Watch the path at the beginning where it references the album - his example has it as album/2/ but really it it whatever album it is on your install. 

  • Avatar
    Yehuda Tiram

    Seems that if you upload the images using FTP and then use the sync album function' you must select "change the photo size" option, otherwise the slideshow will not work.

    I think that the web service that re-sizes the photos on the fly (if they are not originally in the correct size)  breaks the fancybox.

Please sign in to leave a comment.

Powered by Zendesk