How to make a Colorbox Views slideshow: (step by step documentation) [#2085447]

I add this issue because there is no documentation or clear instructions for Colorbox content load and colorbox-node: after 24 Hours reading forums, googling, drupal answers and a lot of trial and errors I Want to share my experience:

Notes: I have tried all lightbox kind modules and no one is as complete and well developed as Colorbox.

Colorbox version:7.x-2.x-dev
Colorbox Node version: 7.x-3.x-dev

Modules I use are Views, Views Slideshow, field collection, Panels and everything works fine so If you have any problem, it's not related to these modules.

The Project: what I want to do is building a Views slideshow with "Field collection" images and titles. Then I want the slideshow to load in a colorbox overlay after clicking a link title for example: play slideshow.
At the end of instructions You can load any views or node that you need in a Colorbox.

Section One:Building views slideshow
1.Add a View
2.Change format to "Slideshow"
3.Add required fields.
4.Change Path to: whatever/%
5.click on Advanced link top right: add a "Contextual Filter"
->Content:Nid
->WHEN THE FILTER VALUE IS NOT IN THE URL
Display all results for the specified field
Provide default value: Content ID from URL
6.format->slideshow->settings:at the end of settings activate Pager and Controls

The view slideshow is ready, Watch the following tutorials If you need:
How to Create a Drupal 7 Slideshow with Views: Tutorial 1 of 2
How to Create a Drupal 7 Slideshow with Views: Tutorial 2 of 2

Section Two: setup play slideshow button
1.add another view: no pager, no path
2.add a field: (this can be any field we want to rewrite the result so it doesn't matter that much for example add "node title")
3. click on field
important: disable Link this field to the original piece of content
-> REWRITE RESULTS:

Rewrite the output of this field -> Play Slideshow
Output this field as a link ->Link path: whatever/!1?width=500&height=500&iframe=true

Note: !1 is for adding "node id" from URL to the link.
width=500&height=500&iframe=true you can change the width an height numbers to change the size of colorbox frame.

Link class:colorbox-node

rewrite te result
4.add a "content pane" so you can insert this View to Panel node page.

Section Three: play the slideshow
Click on play slideshow link in the page and you have your slideshow in a nice colorbox overlay.

Notes:

you can add colorbox-load instead of colorbox-node to load the whole node in colorbox.
don't forget to Enable Colorbox load:admin->config->media->colorbox
you can change the colorbox settings to styles->plain and theme your slideshow or View the way you like by CSS.

A little long but hope this helps someone

File	Size	Author
result.JPG	68.55 KB	garamani
rewrite result.JPG	76.56 KB	garamani
format.JPG	12.31 KB	garamani
contextualfilter.JPG	57.81 KB	garamani
pager.JPG	11.02 KB	garamani
add.JPG	24.83 KB	garamani

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Andre-B

German

Offenburg, Germany

CreditAttribution: Andre-B commented 13 December 2013 at 04:51

Issue summary:	View changes
Status:	Active	» Needs review

it does not look like I can add a online documentation/ readme entry myself, can you take care of this iLLin?

I suggest to include the alternative configuration of width and heights for the colorbox-node link.

Comment #2

deanflory CreditAttribution: deanflory commented 13 December 2013 at 09:11

Any way of displaying Display Suite view modes in a Colorbox slideshow?

Comment #3

Andre-B

German

Offenburg, Germany

CreditAttribution: Andre-B commented 13 December 2013 at 13:14

you can always use rendered entity using a view mode for display, for the colorbox popup itself you can rely on panels, else you will have to implement a custom template for your node template in template.php

see http://drupal.stackexchange.com/questions/27025/how-to-provide-template-... for reference

Comment #4

deanflory CreditAttribution: deanflory commented 10 January 2014 at 20:14

Andre-B, thanks for the help though I'm not following your instructions clearly. Could you elaborate on the "for the colorbox popup itself you can rely on panels" part?

Basically in my nodes, I'm using a Views Slideshow: Cycle on images in a field. Then when clicking on any of those slideshow images is pops up a colorbox of the image(s). I just don't see any option for choosing DS View Modes for the colorbox content, essentially making it impossible to have anything other than an image/media and a caption. I had already set up my various file DS View Modes in anticipation of there being a way to do this as I'd like to have a download link to accompany the media, but I'm not seeing it in any option available. I just don't see any selection of DS view mode anywhere where choosing Colorbox as the link target is allowed.

I do understand how to get DS View modes to display in a view, but I'm trying not to clutter the node's layout, and would rather pile that stuff into an additional click within the colorbox.

I'd rather not lock myself into custom tpl files if I can help it.

Comment #5

iLLin CreditAttribution: iLLin commented 18 January 2014 at 18:42

I added this to the docs list on the module home page.

Comment #6

deanflory CreditAttribution: deanflory commented 21 January 2014 at 04:39

iLLin, was that the "Entity Reference Integration" that's in the latest dev that would help me choose a Display Suite View Mode for items being opened in a Colorbox? I'll take a look and see if that makes my use-case explained in #4 possible. Maybe it's the "Link this field to the original piece of content" that has changed, will check it out.

Trying to get my head around the panels integration. So, if I understand this correctly, I'd create a View that presents the Display Suite View Mode of my choosing, and the panels integration basically just hides that View's block.

How does the field image trigger the colorbox panel pane views block (which I'm guessing is placed into the Manage Display as a mini panel as a block) to become visible?

How does the View using DS view mode as the formatter present more than one item from the field or does the colorbox panel integration provide that to allow a slideshow of items in the field?

Any additional information would be appreciated if you have the time. Maybe I just need to try it and maybe be surprised how the integration presents options where none existed before setting up that panel pane.

Comment #7

iLLin CreditAttribution: iLLin commented 21 January 2014 at 14:25

I don't use panels or display suite. This module basically displays any page you have created inside a modal window without all your other regions such as header, footer, left and right columns. What Andre-B has done with the panels integration is provide helpers to tell the pane that it is being displayed inside a colorbox. That's it. Just allows you to hide or show other panes in your panel based on a context essentially (being viewed in a modal). The module extracts the "content" only and so it should display any page you create. If there is javascript on that page, you may need to adjust something for it to work based on how its integrated. If using attach.behaviors it should work just fine as all that is launched when the content in the colorbox is loaded.