By dalegrebey on

I'm not quite understanding how to link an image to the colorbox module.

content type > manage display > settings > link image to: nothing, content, file...

...I assumed colorbox would become one of these options (similar to lightbox on d6), but no go. I dug around for awhile without much success. Any help/ideas/links are appreciated.

⋅ Categories: Drupal 7.x

Comments

dalegrebey’s picture

dalegrebey commented

ah... I see. You actually have to change the Format from Image to Colorbox--which will than give you the correct options.

sashkernel’s picture

sashkernel commented

Nube here.
Can you give more detail?
I'm new to this module and have no clue how to get it to work.

My goal is to post bunch of images on the page and have colorbox display and flip between them without clicking on each image to view it.

I did not install CCK or Views yet, since there is no stable version yet. Not sure if they are even needed for colorbox.

Anonymous’s picture

Anonymous (not verified) commented

no, they aren't needed for using colorbox. Most users won't need CCK in d7, anyway. Use References to fill the gaps between D7 core and D6 CCK.

What you are describing is a slideshow. You'll need to get the colorbox-plugin to do that. You can find screencasts explaining how to get it on the Colorbox project page. I believe the slideshow settings are under an 'advanced' menu on one of the config pages- the screencast points it out, I believe.

nisarg.patel’s picture

nisarg.patel commented

My Problem is that i want listing of all images ,in(thumbnail mode) then if i click on image ,open it in colorbox.
So what i do?

360pixel’s picture

360pixel commented

Hi,

could you please explain a bit more how to get colorbox runnimg under Drupal 7?
I can not get it to work unfortunally.

Two problems:
- there are two downloads available. What files should go where?
http://drupal.org/project/colorbox and http://colorpowered.com/colorbox/

I get this error after installing the first download in "modules" and the second in "sites/all/libraries/":
Warning: file_get_contents(sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js) [function.file-get-contents]: failed to open stream: No such file or directory in colorbox_get_version() (Zeile 300 von /is/htdocs/wp1057289_A9XV1PX3VL/www/360pixel/web/modules/colorbox/colorbox.module).

- i cannot find the menus you are decribing here. Could you be more explicit here?

A BIG thank you in advance :-)

Cheers . Peter

sashkernel’s picture

sashkernel commented

First of All, be sure that you follow all the steps in README.

1. download plugin from the link provided in one of the first steps in README.
2. extract content to:
/
|_sites
...|_libraries
......|_colorbox
.........|_...Files Go Here

then install the module.
this should resolve your error.
I'm not sure yet how to work with it further. Hope someone will post any instructions here.

360pixel’s picture

360pixel commented

Hi,
i got rid of the error message. I installed the module in "sites/all/modules" and the folder from colorbox in "sites/all/libraries".
But: how do i use or call the colorbox now in Drupal 7 now?
I have no clue how to act with images there. I can upload an image that is related to an article then but i can not see any control where to place that image at what size or how i could call colorbox?

Any help? Any hint? I searched at Drupal.org but did not find any explanation, except that "image handling is now core Drupal 7". Wow! And how do i use this?

Cheers - Peter

sashkernel’s picture

sashkernel commented

I went to Colorbox home page and trying to figure out from examples there.
http://colorpowered.com/colorbox/

It's going to take me a bit of time to figure out how that all works, since coding is not one of my strong skills. I had to contact some of my friends who have more experience with Drupal than I do.

I'll post back if I get anywhere with this.

sashkernel’s picture

sashkernel commented

I got this code from Examples on Colorbox site. And here is how I think it should be pasted on the page. Testing it, but 'no go'.
Please, Correct me if I'm wrong.

<head>
 <script> 
 $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='example1']").colorbox();
 }
 </script>
</head>
<body>
<h2>Elastic Transition</h2> 
	<p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a>
</body>
spaudel1’s picture

spaudel1 commented

hey, I understand where you got it wrong!
fix the path.
you have a folder called colorbox inside the folder colorbox. delete the extra folder called colorbox.
Correct parth for js file should be :sites/all/libraries/colorbox/jquery.colorbox-min.js
not
sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js
simply delete the extra folder called colorbox..

I had the same issue.
-Shaswat

eriknewby’s picture

eriknewby commented

strange. For me it's the other way around. Colorbox breaks if I don't have the "second colorbox folder". my structure has to be sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js

dalegrebey’s picture

dalegrebey commented
  1. I downloaded and installed the most recent version of colorbox
  2. Enabled the module
  3. Created my Image Styles accordingly (thumbnail, medium, large)
  4. Added an additional image style called colorbox (to scale with different width/height proportions)
  5. Added field_image as an Image widget underneath my desired content type (e.g. admin/structure/types/manage/portfolio/display#overlay=admin/structure/types/manage/portfolio
  6. Manage Display on the correct content type
  7. Set the Image Format To Colorbox
  8. Formatted the settings to have Node Image Style set as Thumbnail and Colorbox Image style I set to Colorbox (or large or whatever style you desire).
  9. Clicked update

...worked perfectly for me. The image being rendered in my node.tpl.php, when clicked, now launches the colorbox modal.

On a side note, in node.tpl.php, am using:

  • print $title;
  • print render($content['field_image']);
  • print render($content['body']);

instead of render($content) ...simply because it gave me more control over my templating and made it much easier with all of those elements to bebroken apart.

Hope that helps!

sashkernel’s picture

sashkernel commented

Dale, thanks for instructions.
I'll definitely will try them tonight.

sashkernel’s picture

sashkernel commented

Dale, you are like a second coming of the Christ in this post :)
I played around with your instructions and got it to work.

Didn't do any modifications to node.tpl.php though.

Just one question.
I set field_image to have multiple images, but they get stacked vertically when page renders. Is there a way to sort them in rows? for example 6 images in each row...

dalegrebey’s picture

dalegrebey commented

It's been a seriously busy week... sorry for the slow response.

If I were going to sort them into horizontal rows, instead of being stacked vertically, I would probably start by targetting the CSS element(s) that wrap the image and than try to either float it left or if it's an unordered list (not too sure off the top of my head) display it inline.

Katy J’s picture

Katy J commented

This totally sorted me out, thanks Dale!

sammyframson’s picture

sammyframson commented

I found a nice install overview video by frjo who built the module. Thanks to frjo for a great module and more thanks for a simple installation video overview that helped me greatly...

http://vimeo.com/19122850

I still cant figure out how to easily in D7 change the display of the my image fields in my node (which I know is a separate issue)? I simply want to control the way the images line up on a node type (like left justified rather than right, etc. ) i know that I am missing it somewhere in CSS but I am a novice and hope to find a simple instructions because the documentation goes over my head...

If anyone can help point me in the right direction, it would be greatly appreciated.

dalegrebey’s picture

dalegrebey commented

Rock on... Muy Bueno.

brett1’s picture

brett1 commented

that Video pointed me in the right direction,
also finding it difficult to configure my layout

bjc5070’s picture

bjc5070 commented

I am having some issues. I got everything working, but I cant seem to get a thumbnail on basic pages. I added an image field to basic pages content type. I thought that i took the necessary steps to create a thumbnail inline with page content. but images appear at full size not thumbnail size.

I hope that makes sense. any help?

mjohnq3’s picture

mjohnq3 commented

Create a thumbnail Image Style that you want displayed on your gallery page. Then go to the Manage Display settings page for the content type you used for your gallery. Select the image style you created as your Node image style as shown here: http://www.imageno.com/pls4yfa0hwz1pic.html.

c7210’s picture

c7210 commented

just add class="colorbox" to the link(txt link or img link)...such simple,i wonder why it dosen't appear in any doc for this colorbox.i searched for so long.

cbd11’s picture

cbd11 commented

@c7210 => Love the simplicity of your words!

Just wanted to use colorbox for single images uploaded with IMCE in a basic page body content.

I used to work with shadowbox and that needed just a css class, the same way.

As it was not explained at first in the documentation, I thought there was another way to make colorbox work,
i searched options in durpal's back office... then i read this post.
______

Thanks a lot to the creator of this great module by the way!

bglassmaker’s picture

bglassmaker commented

Just a side note on an old post, to link the images together so when they are in the overlay you can scroll between them you add rel="name to link images" and they will be in the same set.

sagarmarkal’s picture

sagarmarkal commented

I have installed and configure colorbox successfully but not able to get the slideshow or any other views and styles of images after clicking on it.
i have added views,cck,references modules.

plz help me

Diane Bryan’s picture

Diane Bryan commented

Hi Sagar,

I have found the best way to get my head around a module is a video tutorial. Mustardseed Media, CodeKarate, NodeOne, WebWash, and Drupalize.me are excellent places to look.

The main colorbox module developer gave this tutorial that got me going straight:

http://vimeo.com/19122850

Best luck!
d