Drupal 7 open image in colorbox when a “button” on the image is clicked, otherwise go to content I am using Drupal 7 and Colorbox module with Views 3. 

In my view I have an image field. Right now based on my settings when I click the image it can either go to the content or open the image itself in Colorbox. What I want to achieve is maybe have a button (or a link?) at the bottom right corner of the image, when this button is clicked, image opens in Colorbox, if image itself is clicked, it brings you to the content (node page).

How can I achieve this?
In Drupal 7 you can achieve it by the following steps



Steps


Create a new VIEW and add the following fields
Background image : Add the image which you want to show as background image using imagestyle. Also add the link to the node using Link image to. And check Exclude from display. 


Colorbox image : Add the image which you want to show inside COLORBOX using imagestyle. Dont add the link to this image and check Exclude from display

  
Image icon : Add the image which is used to render on the top of the background image  using imagestyle. And check Exclude from display.This image we will use in COLORBOX TRIGGER field.  
Colorbox Trigger : Add this field and make Image icon field as the TRIGGER FIELD and Colorbox image as its CONTENT by use "Replacement patterns".


Custom text : Add Global: Custom text field and add the below html inside it and make sure you should replace [Background image] and [Colorbox Trigger field] using "Replacement patterns". It act like a container. 


&#60;div class="image-wrapper"&#62;
     &#60;div class="outer-image"&#62;[Background image]&#60;/div&#62;
     &#60;div class="inner-image"&#62;[Colorbox Trigger field]&#60;/div&#62;
&#60;/div&#62;




OUTPUT







Note : Arrange the image icon above the background image using CSS