Is there a way to have the images open in lightbox? I've got the field set to do so, but it doesn't. Is there no current integration and if not are there plans to integrate? (I'm using 6.x-1.0-beta2 by the way. There's no option for that in the dropdown.)

Comments

sinasquax’s picture

I use lightbox2 with imageflow with this trick :

Create a template.php in your theme and put this code :


/*
 * Bridge between imageflow and lightbox
 * To get this working, you must send image to imageflow to this format :
 * <a href="url of image or website" rel="slideshow, lightframe, lightvideo or lightmodal depending what we need"><img src="url of the image" alt="title showed in imageflow and lightbox" /></a>
 */

function _phptemplate_get_attributes($attrib, $tag){
  //get attribute from html tag
  $re = '/' . preg_quote($attrib) . '=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/is';
  if (preg_match($re, $tag, $match)) {
    return urldecode($match[2]);
  }
  return false;
}
   
/**
 *  We'll grab only the first image from each row.
 */
function views_slideshow_imageflow_preprocess_views_slideshow_imageflow(&$vars) {
  // Initialize our $images array.
  $vars['images'] = array();

  // Strip all images from the $rows created by the original view query.
  foreach($vars['rows'] as $item) {
    preg_match('@(<\s*img\s+[^>]*>)@i', $item, $matches);
    if ($image = $matches[1]) {
	  // Get alt if exists
	  if ($title = _phptemplate_get_attributes('alt', $item)) {
	    $title = '[' . $title . ']';
	  }
	  
	  // Get rel if exists
	  $rel = strtolower(_phptemplate_get_attributes('rel', $item));
	  
      if (!($url = _phptemplate_get_attributes('href', $item))) {
        // Otherwise link to the original image.
        if (!($url = _phptemplate_get_attributes('src', $image))) {
          // If we get this far, there are probably more serious problems.
          // But for now, we'll go to the front page instead.
          $url = url('<front>');
        }
      }
	  
      // Add the URL to the image's longdesc tag.
	  if ($rel) {
        $image = preg_replace('@img\s+@i', 'img longdesc="javascript:Lightbox.start($(\'&lt;a /&gt;\').attr(\'href\', \'' . $url . '\').attr(\'rel\', \'[|' . $rel . ']' . $title . '\')[0], ' . (($rel == 'slideshow') ? 'true' : 'false') . ', ' . (($rel == 'lightframe') ? 'true' : 'false') . ', ' . (($rel == 'lightvideo') ? 'true' : 'false') . ', ' . (($rel == 'lightmodal') ? 'true' : 'false') . ');" ', $image);
  	  } else {
	    $image = preg_replace('@img\s+@i', 'img longdesc="'. $url .'" ', $image);
	  }
	  
      // Add the image to our image array to display.
      $vars['images'][] = $image;
    }
  }

  // Find the path to our plugin.
  $path = variable_get('views_slideshow_imageflow_plugin', 'sites/all/plugins/imageflow');

  // Add the required JS and CSS.
  drupal_add_js($path .'/imageflow.packed.js');
  drupal_add_css($path .'/imageflow.css');
  drupal_add_js(drupal_get_path('module', 'views_slideshow_imageflow') .'/views_slideshow_imageflow.js');

  $view = $vars['view'];
  $rows = $vars['rows'];
  $options = $vars['options'];
  switch ($options['imageflow']['start']) {
    case 'start':
      $start = 1;
      break;
    case 'end':
      $start = sizeof($rows);
      break;
    case 'middle':
      $start = ceil(sizeof($rows) / 2);
      break;
    case 'random':
      $start = rand(1, sizeof($rows));
      break;
  }

  $settings = array(
    'aspectRatio' => $options['imageflow']['aspect_ratio'],
    'imagesHeight' => $options['imageflow']['images_height'],
    'imageCursor' => $options['imageflow']['image_cursor'],
    'sliderCursor' => $options['imageflow']['slider_cursor'],
    'startID' => $start,
    'slider' => $options['imageflow']['slider'],
  );
  drupal_add_js(array('imageFlow' => array('views-slideshow-imageflow-images-'. $vars['id'] => $settings)), 'setting');
}

And create a view with imageflow display and you must have image field in this format :

<a href="url of image or website" rel="slideshow, lightframe, lightvideo or lightmodal depending what we need"><img src="url of the image" alt="title showed in imageflow and lightbox" /></a>
ocanzillon’s picture

I have some display problems with your solution: style height property of different inageflow divs is not set, so I cannot see the whole image. If I directly change this code in the module itself (I know, it is absolutely not the way to do), display is ok.
Other problem: with IE7, Lightbox frame does not display properly: the screen is greyed but frame is never displayed and there is a javascript error.
Do you have an idea for that? Do you have the same problems or is it a configuration issue on my side?
Anyway, I think this feature should be included in original module, because it is a very interesting improvement.
Another point: the behavior that fills the "longdesc" attribute with image source when there is no "a" tag is, on my point of view, not correct. I should be able to display images with imageflow, without linking them to a content. Which is not the case with this behavior.

sinasquax’s picture

I have no problem with size of images, for the ie problem i have updated the code one week ago, maybe you copied the code before this update, try to recopy this code.

CinemaSaville’s picture

Will this work with the shadowbox module as well? And do I put this in the current template.php file? And not sure what to do with this piece of code
Only local images are allowed.

Thanks.

ocanzillon’s picture

@sinasquax: Yes it is ok now with the code here. I should have copied it before you change it. Thanks a lot.
I still have the first issue (height style property not set, so images don't appear entirely) when I paste the code in template.php. It is ok when I directly modify module's code (with exactly the same code in both cases)... Quite strange...
What do you think about 3rd point? It could be interesting to have an imageflow with no link at all, just to display images.
Are you a contributor for this module? Is this module supposed to be updated soon?

mrgoltra’s picture

tag

aaron’s picture

That's a great idea! I'll see about adding an option and integrate that w/ sinasquax's solution.

Thanks!

tsi’s picture

subscribing

sabsbrain’s picture

I am relatively new to Drupal and loving the systems power and flexibility and really enjoying learning about all the aspects of the system.

I found the imageflow module which I think is brilliant and would love to get it to work with lightbox, but was wondering if someone could explain a little more on how to pass the 'url of image or website' into imageflow using views.

Am I correct to say that you would add the image as a field to the view, but set it to not display and provide only the link to the file and then create a second 'derived' field in which you would paste it into the img portion of the link?

Could someone possible show me the settings to do this within their view?

Many thanks

armyofda12mnkeys’s picture

i don't understand "And create a view with imageflow display and you must have image field in this format :"...
Doesn't Views's Style settings just hand off the cck field in whatever format it changes it to the output?

I added the code, doesn't work assuming cause "I" need to send the link in certain format?

Thanks for any guidance,
Ari

Apfel007’s picture

did someone solve this with beta 1?

Apfel007’s picture

How to pass attributes like width, height and scroll, through the javascript:lightbox2.start??

Cheers

treehacker’s picture

Same for me... I don't understand very well how to change the style of the link.

Junro’s picture

subscribe

treehacker’s picture

I realized, that this is only working for an old version of imageflow. Anyway, I did it now with the highslide module. You can integrate is more easy into imageflow.

BTW, I wrote a little help to get reflections working with the internal reflect.php -> http://drupal.org/node/500140

izmeez’s picture

subscribing

neilsabharwal’s picture

How can this be done with the highslide module
i tried editing the js file like in the instructions here http://finnrudolph.de/ImageFlow/Combinations
i also tried playing around with the onCLick override functionality, im pretty sure thats the part where im going wrong
what are you using for your onclick overide?

patator’s picture

Version: 6.x-1.x-dev » 6.x-2.0-alpha1

possible solution for lighybox2
http://software.finnrudolph.de/ImageFlow_0.9_Lightbox2/

I have not tried

summit’s picture

Subscribing, greetings, Martijn

jamesbenison’s picture

For colorbox, go to your onClick override in the menu.
Paste this:

function() {jQuery.colorbox({href:this.url,title:this.title});}

You are done.

Alacar’s picture

And create a view with imageflow display and you must have image field in this format :

Only local images are allowed.

Please, where I have to put these parameters? In the field called 'Rewrite the output of this field' ?
I've tried to put it here, but i don't know what to inform for the 'img src', because the images are filtered (node:published Yes).

Anybody would have an idea?

ITMonkey’s picture

Title: Any chance for Lightbox or Colorbox integration? » Any chance for Lightbox integration?

This opens a nice white box for me, which after a few seconds expands to an enormous white box, but at no time does it display the image. Any ideas?

--EDIT--

Solved my own issue, I used the drush command to download the colorbox lib, which downloaded the latest version. As described in the destructions I have replaced with colorbox-1.3.18.

ITMonkey’s picture

Title: Any chance for Lightbox integration? » Any chance for Lightbox or Colorbox integration?