Skip to main content

Responsive Colorbox Drupal 7

Please add the following code to js file in your THEME

(function ($, Drupal, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
  $.colorbox.settings.onLoad = function() {
    colorboxResize();
  }
  //Customize colorbox dimensions
  var colorboxResize = function(resize) {
    var width = "90%";
    var height = "90%";
    if($(window).width() > 960) { width = "860" }
    if($(window).height() > 700) { height = "630" }
    $.colorbox.settings.height = height;
    $.colorbox.settings.width = width;
    //if window is resized while lightbox open
    if(resize) {
      $.colorbox.resize({
        'height': height,
        'width': width
      });
    }
  }
  //In case of window being resized
  $(window).resize(function() {
    colorboxResize(true);
  });
})(jQuery, Drupal, this, this.document);

Comments

Post a Comment

Popular posts from this blog

How to configure Drupal7, varnish, authcache2 and ESI in Nginx server?

This is step by step procedure for, how to configure the authcache, varnih and ESI for the drupal7 project in NGINX erver. To configuring the Nginx Server use the procedure from document " http://www.geoffstratton.com/2014/03/nginx-php-fpm-apc-ssl-drupal/ " Well, make sure your nginx server is up and running. 1.Configuring the Authcache module.      Download the module from https://www.drupal.org/project/authcache    Enable only the authcache module    Go to admin/reports/status , then you can see the Authcache area is red and saying that there is no back end has been configured.   2.Configure Varnish on the back-end[nginx server].     Using the Following commands,       $ curl http://repo.varnish-cache.org/debian/GPG-key.txt | sudo apt-key add -     $ echo "deb http://repo.varnish-cache.org/ubuntu/ precise varnish-3.0" | sudo tee -a /etc/apt/sources.list     $ sudo apt-get update ...
2 comments
Read more

How to create the Popup or modal in Drupal 8?

The following code will help you to create the popup in Drupal 8.  use \ Drupal \ Core \ Ajax ; function testingPopup () { $response = new AjaxResponse (); $title = $this -> t ( 'Title for the Popup.' ); $form [ '#attached' ][ 'library' ][] = 'core/drupal.dialog.ajax' ; $response -> setAttachments ( $form [ '#attached' ]); $content = '<div class="test-popup-content">' . 'Content in HTML format' . '</div>' ; $options = array ( 'dialogClass' => 'popup-dialog-class' , 'width' => '75%' , ); $modal = new OpenModalDialogCommand ( $title , $content , $options ); $response -> addCommand ( $modal ); return $response ; } You can call the function testingPopup() , you will get the popup.
1 comment
Read more

Drupal Views exposed filter of Node title as drop down.

It can be done through using "Jump menu" settings in views. Download the Ctools module  http://drupal.org/project/ctools  Enable the Chaos Tools Module. This module provides a Views Style Plugin called "Jump Menu" Create a view of type node with two fields Content:nid and Cotent:title. And the path of the views page is like 'my_node_list'. For the Content:nid make sure you click on  Rewrite the output of the field . The rewritten output of the field should be  my_node_list/[nid]. Make sure you select the  exclude from display  checkbox. In the settings for  Style  in the view, select the  Jump Menu  style. Click on the settings for the style. Make sure the  Path  dropdown has 'Content:nid' choosen. Add a block display to the view. Name the block "Node details" and put the contextual filter to filter with nid. Save the view Go to block configuration under structure and configure the above block (Node details)....
4 comments
Read more