0

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?

Improve this question
1

In Drupal 7 you can achieve it by the following steps

enter image description here

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.

    enter image description here

  • 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

    enter image description here

  • 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".

    enter image description here

  • 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. 

    
<div class="image-wrapper">
     <div class="outer-image">[Background image]</div>
     <div class="inner-image">[Colorbox Trigger field]</div>
</div>

    enter image description here

    OUTPUT

    enter image description here

    enter image description here

    enter image description here

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

Improve this answer
6
  • Thank you That's really helpful. But consider the fact that image size is always varying from image to image, and in this solution the image icon doesn't sit on the image with simple css. How can I solve this? Maybe I can give the image dimensions to the "image-wrapper" div. How I can achieve that? Thanks – Shamil.F Jun 26 '14 at 3:51
  • YES, you should maintain proper image dimension. By using Image Style you can achieve it. You can go through Working Image Styles article – inizio Jun 26 '14 at 9:04
  • No what I meant was, I actually want my images to look in different sizes. So I scale them say by 400x400 (not Scale and Crop). In that case, the fullscreen button does not align with the image automatically because the div containing them is 300px, image is 200px, and the fullscreen button is at the end of 300pixels so 100px away from the image – Shamil.F Jul 1 '14 at 8:05
  • First of all, for me if all the background images are in different sizes then it will look little bit of odd. If you want like that then you can add proper CSS, which will allow your button to be on bottom left only. – inizio Jul 1 '14 at 9:01
  • Thank you, I solved it with few CSS tricks (e.g. inline-block, text-align:center etc.) that I didn't fully understand before. Sorry for my CSS ignorance :) – Shamil.F Jul 1 '14 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.