Search code examples
javascriptphpwordpresslightboxredux-framework

How to make: enable / disable option for javascript function with php?


I am still new in php, javascript so I hope that you can help me. :)

I have a LightBox which works good. But Now I want to make enable / disable option for Lightbox in my Wordpress theme.

I have this code for settings options page:

array (
                        'id' => 'enable_lightbox',
                        'type' => 'switch',
                        'title' => __('Enable Lightbox', 'framework'),
                        'desc' => __('Enable or disable lightbox', 'framework'),
                        'default' => 1,
                    ),

and this is code for lightbox:

/LightBox    
function buildShareThis(url){
 var switchTo5x=true;
 stLight.options({publisher: "496075ad-6369-474b-ba12-283ff1fe76ac", doNotHash: false, doNotCopy: false, hashAddressBar: false});
 var customShareThis  = "<div class='share'>";
 customShareThis += "<span class='st_sharethis_large' displayText='ShareThis' st_url='"+url+"'></span> ";
 customShareThis += "<span class='st_facebook_large' displayText='Facebook' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_googleplus_large' displayText='Google +' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_twitter_large' displayText='Tweet' st_url='"+url+"'></span> ";
 customShareThis += "<span class='st_pinterest_large' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_linkedin_large' displayText='LinkedIn' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_baidu_large' displayText='Baidu' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_reddit_large' displayText='Reddit' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_tumblr_large' displayText='Tumblr' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_email_large' displayText='Email' st_url='"+url+"'></span>";
 customShareThis += "<span class='st_print_large' displayText='Print' st_url='"+url+"'></span>";
 customShareThis += "</div>";
 return customShareThis;
}


 jQuery(".fancybox, a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif'], .video")
 .attr('rel', 'gallery')
 .fancybox({
   closeClick  : false,
   nextEffect: 'fade',
   prevEffect: 'fade',
   beforeShow: function() {
     var caption =  jQuery(this.element).data("caption") ? jQuery(this.element).data("caption") : "";
     this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
  },
  afterShow: function(){
     stButtons.locateElements();
  },
  helpers : {
    title : {
        type: 'inside'
  }
  } 
 });

What code do I need to use to get this working ?

So that I could from settings options page turn on or turn off Lightbox ?

Thank you


Solution

  • php code

    if($setting -> default == 1) // Is enable
    {
           echo '<script>var enable_Light = false; </script>';
    }
    

    in LightBox code add a if sectment.

     if(enable_Light == true){
     jQuery(".fancybox, a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif'], .video")
     .attr('rel', 'gallery')
     .fancybox({
       closeClick  : false,
       nextEffect: 'fade',
       prevEffect: 'fade',
       beforeShow: function() {
         var caption =  jQuery(this.element).data("caption") ? jQuery(this.element).data("caption") : "";
         this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
      },
      afterShow: function(){
         stButtons.locateElements();
      },
      helpers : {
        title : {
            type: 'inside'
      }
      } 
     });
    }