Drupal: larger image on click

Posted by rolf on Sunday, 9 November 2014

example of drupal colorbox module
Getting a larger image when clicking on an image can be done with a lightbox. In Drupal the best module to use is colorbox.

I used a combination of colorbox module and insert module. Download and install these modules and the dependency libraries api module. NOTE: on some systems, including mine, only colorbox version 7.x-1.6 worked and not 7.x-2., see also this discussion on drupal.org.

Then download the colorbox plugin (For me only the colorbox master zip worked and not this  link. Extract the archive, rename it to "colorbox" and copy it to the path "sites/all/libraries/colorbox", so that it becomes  "sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js".

Configuration
navigate your browser to
  MYSITE.com/admin/config/media/colorbox Or
  MYSITE.com/?q=admin/config/media/colorbox Or
click on
  Configuration > Media > ColorBox
I left everything to default.  

When writing an article and inserting an image it is necessary to insert the image using the format
  colorbox small , colorbox medium or colorbox large
see insert_colorbox_module.jpg

** How to display only the one image you clicked on ** \\
see  https://www.drupal.org/node/1026112
 

blog_tags: 
drupal
  • 257 reads

Add new comment

More information about text formats

Filtered HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <img> <br> <p> <span>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Code snippets in <code>...</code> or <source>...</source> automatically will be pretty printed.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Target Image