1

I am displaying a list of images using Views. I would like a different image to display on hover, and then text/content to be displayed in the pop-up. I am trying to use Colorbox module, but can't figure out how to display a different image on hover, or how to display text/content in the pop-up.

Any help would be greatly appreciated.

This is the html that the Colorbox trigger field (set to Image) produces with "Enable Colorbox load" and "Enable Colorbox inline" options both UNTICKED:

<a class="colorbox-node init-colorbox-node-processed-processed" title="Italian" href="http://myshite/content/italian?width=500&amp;height=500"><img width="92" height="77" alt="" src="http://mysite/sites/default/files/italian.jpg" typeof="foaf:Image"></a>

What am I missing/doing wrong? The popup is still not working.

1
  • Are you trying to show two images , one to start, then one on hover, and then click to see the hover image in a color box? – Aaron Ortega Jun 21 '13 at 6:39
1
+50

if I understand correctly, you want to swap in another image on hover, and when you click, you want the text to pop up in an overlay ?

Since you've already added the second hover image to the content type, if you set a class on the row, like .image-swap, add a class on the image field you want as the main image, like .image-main , and a class on the hover swap in image, like .image-hover

so your views output for the row ( without the extraneous stuff ) will look like

<div class="views-row image-swap">
    <span class="views-field image-main"><img ... /></span>
    <span class="views-field image-hover"><img ... /></span>
</div>

to handle the hover swap, you'd need css like this:

.image-swap .image-hover {
    display: none;
}
.image-swap.hovered .image-hover {
    display: inherit;
}
.image-swap.hovered .image-main {
    display: none;
}

and a js snippet of

$(".image-swap").hover( 
    function () { $(this).addClass("hovered"); } ,
    function () { $(this).removeClass("hovered"); }
);

That should handle your image hover problem.

Now you can set up a colorbox trigger on the image-hover field to display the desired content in a colorbox overlay.

16
  • Thank you so much for that @dom-day The requirements have now changed and they want to scrap the hover state. So instead they now just want the image to display the desired content in a colorbox overlay. But I am struggling to get this to work :( At the moment, what happens is that clicking on the language links in the banner view takes me to the node. Instead, what I would like to happen is for a (Colorbox) popup to appear. – kine456 Jun 28 '13 at 6:06
  • What do I need to do in order to make the pages display in a colourbox popup? I suspect that what I've done wrong is the Rewrite Results for the Colorbox trigger and/or Image fields. Any help would be greatly appreciated. This is how my View is made up. Most of the fields however, are hidden from display... View and Image field: img826.imageshack.us/img826/7403/j6f5.jpg Colorbox trigger field img708.imageshack.us/img708/3601/rxru.jpg @Dom-Day – kine456 Jun 28 '13 at 6:07
  • 1
    I think the problem is that you are over-engineering. If the field you wish to display in an overlay is in the view and hidden, you don't need to specify any link information. This is handled by the colorbox trigger. Just set up a colorbox trigger, uncheck "create a label", set the trigger field to image, set the popup to [body] and you should be good to go. ( if the text you want to show is in the [body] field ) – Dom Day Jun 28 '13 at 6:20
  • .. to be clear: remove the rewrite on the image field. it's not a link. colorbox trigger creates the link. – Dom Day Jun 28 '13 at 6:30
  • Thanks for that @dom-day!!! I've removed the rewrite "link" and rewrite "output" from the Image field. The Colorbox trigger rewrite link is still set to: mysite[path]?width=500&height=500&inline=true#id-of-con…" However, the image links are still taking me to the node pages/full pages, instead of opening in a pop up. What am I missing? – kine456 Jun 28 '13 at 7:24
1

The Beautytips module provides ballon-help style tooltips for any page element and you can also use it in views.

Currently i am using this module with views to display the text(for field) in bottom of my page , when mouse hover of image. For more information check this video

It provides an API for adding custom beautytips as well as some built-in features. Admins can enable rollover balloon-help style tooltips for text fields within forms. It also supplies hover tips for Drupal help links and advanced help links.

6
  • Thanks @Bala But I was hoping to use Views + Colorbox... – kine456 Jun 21 '13 at 5:23
  • To use it in views or anywhere just mention the class name, for eg <a href="#" class="beautytips">TEST</a>. Please read the Readme file for more info. – Bala Jun 21 '13 at 5:34
  • Thank you @Bala I've read the readme file multiple times but still can't get it throug to my thick head :( I can't figure out how to wrap the a tag around the images/links which are displayed in the view. At first I thought the a href needs to be added to the page/node, but that didn't make any sense :S – kine456 Jun 21 '13 at 5:53
  • try like this <p class="beautytips" title="your text"><a href="#"><img src="3.jpg" /></a></p> – Bala Jun 21 '13 at 6:00
  • If you are using in views, then enable rewrite output a field and <p class="beautytips" title="[token_here]"><a href="[token_here]"><img src="3.jpg" /></a></p> – Bala Jun 21 '13 at 6:03
1

Add a new image field to your content type.

In Views, select the fields for title, description, image, hover_image, and colorbox trigger.

Exclude description & hover_image from display.

Set the colorbox trigger field to image, and the popup field to

<div class="description">[description]</div>
[field_hover_image]

You'd also need to add js to listen for the hover event and trigger colorbox, i.e.

jQuery(function($){
$('.image-class').hover(function(){
$(this).colorbox();
}, function(){
$(this).colorbox.close();
});
})();
6
  • Thank you @adam-bear Re: Add a new image field to your content type. I would like the thumbnail image in the view to link to the Body of the node. Do your instructions still stand? – kine456 Jun 24 '13 at 2:01
  • Thank you @adam-bear I added a new image field to my content type (hover image). In Views, I selected fields for image, hover_image, colorbox trigger and body. I've excluded body and hover_image from display. For image field I've set the formatter to Colorbox. Content image style & Colorbox image style both set to thumbnail. For Body field, I've set the default Formatter. For colorbox trigger field, I've set the Trigger field to Image. I tried the snipped you suggested in the Popup field but it did nothing... – kine456 Jun 24 '13 at 3:02
  • @adam-bear For the image_hover field, I've set the formatter to colorbox, Content image style and colorbox image style to None (original image) I am still getting the same image in the pop up as in the view. What am I doing wrong? – kine456 Jun 24 '13 at 3:03
  • You'll need to change the jquery selector to the class set for thumbnail, and the Colorbox trigger needs to be set for hover img. – adam_bear Jun 24 '13 at 19:31
  • Thank you @adam-bear Am I even close? img402.imageshack.us/img402/897/w7vz.jpg How do I change the jquery selector to the class set for thumbnail? How do I set the clolorbox trigger for hover img? – kine456 Jun 25 '13 at 1:31
0

Hover Preview for ImageCache this module will do image hover popup and even you can set the different styles and also able to use in views. See the demo

The implementation of this module goes a bit further than just a javascript hover. It allows for hovering from any defined ImageCache preset to any other ImageCache preset. Since this is provided as a series of formatters, it is supported both in views and at the theme output layer.

1
  • Thank you @bala. But I am really trying to get the Colorbox module to work :( – kine456 Jun 27 '13 at 23:27

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.