Hello,
This is tutorial how to add teaser/text to custom container (for more information see http://drupal.org/node/453532 ).

Problem descr.: need additional information which will describe current picture.
I will show whole my way to solution (step by step) and maybe you will do it better than me.

0. I did it with hack, according to aaron comment (http://drupal.org/node/453532#comment-1721994).. Ok, let rocking...
1. I explore code of Advomatic.com with firebug and looking forward for 'slideshow-breakout'. So, now I understood where do we need to
insert the js code
$('#customshow-breakout').html(Drupal.settings.customshow[imageID]);
or as I did with some effects 

$('#customshow-breakout').hide();
$('#customshow-breakout').fadeIn('slow').html(Drupal.settings.customshow[imageID]);

1.1 In ImageFlow plugging's folder (by default sites/all/plugins/imageflow/) in imageflow.js looking for next block/line (in my case- line 571 but in another ver. ImageFlow pluggin number may change) and insert our code and save the file. Your code have to look like below:

	/* Initializes image gliding animation */
	this.glideTo = function(imageID)
	{
		/* Calculate new image position target */
		var x = -imageID * thisObject.xStep;
		this.target = x;
		this.memTarget = x;
		this.imageID = imageID;

		/* Display new caption */
		var caption = thisObject.imagesDiv.childNodes[imageID].getAttribute('alt');
		if (caption === '' || thisObject.captions === false)
		{
			caption = ' ';
		}
		thisObject.captionDiv.innerHTML = caption;

// Insert next code here
$('#customshow-breakout').hide();
$('#customshow-breakout').fadeIn('slow').html(Drupal.settings.customshow[imageID]);
//End custom code

		/* Set scrollbar slider to new position */
		if (thisObject.MouseDrag.busy === false)
		{
			this.newSliderX = (imageID * thisObject.scrollbarWidth) / (thisObject.max-1) - thisObject.MouseDrag.newX;
			thisObject.sliderDiv.style.marginLeft = (thisObject.newSliderX - thisObject.sliderWidth) + 'px';
		}

1.2 Now we need to pack our code it isn't necessary but recommeded (aaron made it, so...)) with packer (http://dean.edwards.name/packer/). Choose ptions: 'Base62 encode' and I recommend 'Shrink variables'.
1.3 Copy result in imageflow.packed.js (will found in same folder with imageflow.js) and save.
2. Go to your view in drupal and add 'Title' and/or 'Teaser'/etc. to fields (important: first fild in view must be image, second - title! ).
2.1 Go to 'Views Slideshow: ImageFlow' module folder and open file 'views-slideshow-imageflow.tpl.php'
2.2 Insert <?php $desc= array(); ?> before first html tag.
2.3 After 

<?php foreach ($images as $key => $image): ?>
       <?php print $image ."\n";

insert desc[]=strstr($rows[$key],'<div class="views-field-title">');
2.4 In end of file insert 

<?php drupal_add_js(array('customshow' => $desc), 'setting');?>
  <div id='customshow-breakout'></div>

and save.
Important:You must configure your code if you don't want add 'Title' in description (hint: desc[]=strstr($rows[$key],'

');

That's it! Done.

Bonus:
If you want add buttons or another ImageFlow effects - configure that file 'views_slideshow_imageflow.js' .

Hope my tutorial help you.
HNY - C новым годом по-нашему!)

Comments

geo’s picture

geo commented

You can insert '

' anywhere in your page and it will work all the same and setup div's display by CSS.

tsi’s picture

tsi commented

Great ! thank you.

karl2011’s picture

karl2011 commented

thanks much

Rob T’s picture

Rob T commented

Thanks for the lesson.

In instruction 2.3, I was getting an error until I changed "desc[]=" to "$desc[]=". Now it seems to work as desired.

marcoka’s picture

marcoka commented

is this patch commited/intergrated?

geo’s picture

geo commented

@Rob T:
Yes this is mistake. Thanks for update.

@e-anima
It commited and works fine if apply previous comment(Rob T - thx again))

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

tajabosc’s picture

tajabosc commented

Hello,

i'm trying to patch file views-slideshow-imageflow.tpl.php, is anything wrong in my code below?

Thanks in advance

<?php $desc= array(); ?>

  <div id="views-slideshow-imageflow-<?php print $id; ?>" class="views-slideshow-imageflow">
    <?php if (!empty($title)) : ?>
      <h3><?php print $title; ?></h3>
    <?php endif; ?>

    <div id="views-slideshow-imageflow-images-<?php print $id; ?>" class="views-slideshow-imageflow-images imageflow">
      <?php foreach ($images as $key => $image): ?>
       <?php print $image ."\n"; ?>
<?php $desc[]=strstr($rows[$key],'<div class="views-field-title">');  ?>
<?php endforeach; ?>

</div>
<?php drupal_add_js(array('slideshow' => $desc), 'setting');?>
  <div id='slideshow-breakout'></div>

</div>
geo’s picture

geo commented
Status: Closed (fixed) » Fixed
domh87’s picture

domh87 commented

Is anyone else having problems with this? I have changed all the relevant code but when i pack the code it all seems to go wrong and my images will not appear, if i go back to using the old imageflow.packed.js file my images appear again but not with the relevant text? Any help is appreciated

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

sotiris’s picture

sotiris commented

Same problems here, i followed every step from this tutorial but with no result. I can't see any titles.

UPDATE: At 2.3 first you have to change
foreach ($images as $image):
with
foreach ($images as $key => $image):
and then
insert $desc[]=strstr($rows[$key],'

');

This wasn't so clear, at least for me... Anyway now i have what i expected, images+titles

Thank you for this tutorial!