BuddyDev

Search

How to Use Third Party Lightbox Plugin to Open Images

Tagged: 

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 20, 2016 at 6:12 pm #5179

    Hello,

    I want to test a third party lightbox plugin to open images to see what it looks like but I don’t know how to go about doing it. I have installed a third party lightbox plugin but the images still open in the default MediaPress lightbox. How do I get the images to open in the third party lightbox plugin?

    Thanks!

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on August 21, 2016 at 6:54 pm #5196

    Hi Simon,
    Please see this
    https://buddydev.com/support/forums/topic/lightbox-not-loading/#post-959

    You can literally use any lightbox. But you will need to pregare gallery/media html slightly to be uable with that lightbox.

    Hope that helps.

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 22, 2016 at 12:14 pm #5205

    Hi Brajesh,

    Thank you for your help. I have installed the Lightbox Plus plugin to test with your code, but where do I place the first section of code (the javascript)? I tried placing it in functions.php but it gave me a syntax error.

    Thanks,

    Simon

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 22, 2016 at 1:56 pm #5209

    I also tried placing the first section of code into wp-includes/js/customize-base.js but it didn’t change anything.

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on August 22, 2016 at 3:02 pm #5210

    Hi Simon,
    The Javascript code should go inside

    
jQuery(document).ready( function () {

var jq = jQuery;

//code here
});

    And the php part can go to the bp-custom.php or your functions.php

    Once done with that and the colorbox active, you can visit to Your Profile->Galleries->Any Photo Gallery(single gallery page where media are listed). Now clicking on media should open that in the lightbox.

    Hope that helps.

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 22, 2016 at 4:07 pm #5216

    Hi Brajesh,

    Sorry I don’t have any experience with Javascript. In which file should I place the Javascript code? I tried it in wp-includes/js/customize-base.js and I placed the PHP code in bp-custom.php but it didn’t change anything, the images still open up in their own page with the comment box below.

    Also, DreamWeaver is highlighting the following errors in the Javascript code:

    var jq = jQuery; …… Error Message: Missing “use strict” statement

    if( jq.fn.colorbox != undefined ) { ……. Error Message: Expected “!==” and instead saw “!=”

    Thanks,

    Simon

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on August 22, 2016 at 7:10 pm #5225

    Hi Simon,
    No problem.
    I will post it as a small plugin on github today/tomorrow.

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 22, 2016 at 8:15 pm #5235

    Hi Brajesh,

    Thanks, that would be cool!

  • Participant
    Level: Enlightened
    Posts: 29
    Simon on August 24, 2016 at 2:11 pm #5252

    Hi Brajesh,

    Any news on the plugin?

    Thanks

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on August 25, 2016 at 9:59 am #5257

    Hi Simon,
    Sorry could not post yesterday. Will do it today.

You must be logged in to reply to this topic.

This topic is: not resolved