User menu

You are here

Views jQFX Imageflow

Annie Nelson Team USA 11 Typical Sail on the Bay Stars & Stripes Sailing in San Diego Alongside Beagle V San Diego Bay June 2010
A New Module Has Been ReleasedOn 04/18/2012 I pushed the new drupal 7 version of the Imageflow module. This marks a shift away from the "Views jQFX" approach. Other then changing colors via admin, it should already do everything this module does and more. Documentation is still sparse though. The info below applies to the old module. It is dated but still works.

New changes and features. First, I discovered and fixed a critical bug that could break the image paths. Significantly, the module now supports the link field. The way I have it set up is this. The module will look first for images. If the image is in an anchor tag, that becomes the link. If the image is not a link and you have another link in your views output, that is what gets used.

The new module is up. The YouTube demo only required imagecache actions, colorbox, link, and this module.

Other imageflow features: Colors of the background, reflection, and text can be changed in the menu now. The onClick override function can be used for things like opening a colorbox. This is important in a plugin like this because simply using the rel attribute will cause all images to open a colorbox when the desired behavior is for only the front image to do so.

Demo with custom colors:

Module Dependencies

To install Imageflow you'll need

Optional Modules (used in the demo)

Basic Installation

Upload the module to your modules directory and enable it. The Imageflow plugin library (the whole thing) needs to be installed so the directory structure looks like 'sites/all/libraries/ImageFlow/imageflow.js' for this to work. Change the style setting in the view to jQFX for the options menu to appear. Just about everything that imageflow can do should work in this module, including support for jpg and png reflections and  support for image transparency.

The README file has a ton of information on installation and setup.

Adding YouTube to Your ImageFlow and Colorbox

First, get your imageflow installed and be sure everything is working, including your colorbox. If that is done the rest isn't too tough. You actually just get the images from YouTube. Do a google search to find out how this is done. YouTube will have thumbnails and a larger image of your video that you can hijack. Just add these to your imageflow in the usual fashion. Add your title/alt tags etc.

Create a Link field for your content. It's pretty basic to set up. In your link field use the embed path to your video, not the watch path.

Example:

You only need the path. No titles/etc are necessary. Add this link field to your view.

Important the module will take the first link it finds. For instance, if you have the image "linked to file", that will get used instead of the link field. If you have title fields linked to the node, those will get used. These will override your link field. Be sure you don't have any other links in your views output.

Make The Popup:

Go to the jQfx ImageFlow setup form in your view. In the onClick function box use this code:

function() {
  jQuery.colorbox({
    href:this.getAttribute('longdesc'),
    title:this.title,
    iframe:true,
    innerWidth:480,
    innerHeight:390
  });
}

You can change the height and width of your popup in the code. That's pretty much it except for one thing. If you want to make your images look like little video players, just use imagecache actions(http://drupal.org/project/imagecache_actions) and create the following preset:

1Add scale & crop

2Watermark your image with a little video player png. You can use this image below.

Good luck.

Notes:

  • It is important to be careful with some fields like opacity array and reflectionGET or your images won't display. The README file has the full list of options for both ImageFlow and the reflect scripts.
  • Imageflow will throw an error in internet explorer when trying to use the navigation buttons if slideshow mode is enabled and autostart is not chosen. This is a bug with imageflow and not the views jqfx imageflow module.
  • CSS aggregation will break the output unless the imageflow.css file in the plugin has a the line '@charset-UTF8' removed. Since the plugin belongs to Finn Rudolph I cannot host a modified version for download on this site.
  • To add the title as a caption to your colorbox popup use function() {jQuery.colorbox({href:this.url,title:this.title});} in your onClick function box. The sample code in the form doesn't create captions. I will add this in the next update.
 

Comments

First of all, thanks again James for great work. Cloud carousel is great. I have just added Imageflow for a video display and it works great. But I'm wondering if it's somehow conflicting with my youtube embedding for files that aren't in the display. I don't know js and would be grateful if you could mull it over and see if you could make any suggestions.

I am using Drupal 7 and media module. I uploaded several videos, they show up as a thumbnail with the Youtube name (u90LfIzyK1U). They go into the files/media-youtube file as a jpg and play very nicely.

Then I installed Imageflow and followed your directions above and got the player working and it's great.

Next I went to upload another video that wasn't to be in teh player and I can't get it to upload. Instead of showing up in the files/media-youtube folder it goes right into the files folder and it isn't a jpg--it has no extension. When I look at it in the media list, it's type is application/octet-stream whereas the other are video/youtube. If I click on it, I get a page of code.

Does this make any sense to you? Can you think of anything that might be conflicting with the youtube module code? I went to plan B and set up an AmazonS3 account and I can get my video to display in the OSM player but I don't get audio. No idea there either.

Thanks for any ideas....

Well, I went back to an earlier version of my site before I installed Imageflow and have the same issue. I've spent hours on this and am totally stumped. But I'm glad it's not Imageflow because I really like it! Thanks anyway---

Before I created the demo on this page I tried to do it with the media module.  Ironically I am dealing with the same issue that you are having but in trying to get the media module working with the OSM player.  The media module is a very complicated beast that is trying to do a lot.  It is too early and the thing is just plain still rough around the edges.  I would bet that in several months things will pan out.  I understand the overall vision with the media module and it makes sense.  Realistically all of the jQuery plugin modules here on this site will eventually need to work with the media module or they are going to die.  We are just in an early state of development yet.

why the images cannot be displayed when everything is configured according to the README file? only the ALT text can display

Ususally if the images don't display it's do to the reflect path being incorrect.

This fixed it for me, thanks a bunch!

Hello james your module is great, I can create the imageflow display for images without any problem and it looks great too but I can only do that for images.
I just can't understand the instructions for the youtube part and I have tried what ever I can come up with and that doesn't work too. The youtube instructions aren't too newbie friendly so please try to make it easier if you can thanks..

plz tell clearly how to add video in the view jqfx image flow. Actually i didn't understand the onclick override function. function() { jQuery.colorbox( { href:this.getAttribute('longdesc'), title:this.title, iframe:true, innerWidth:480, innerHeight:390 } ); } In this fuction how the longdesc gets the youtube link i can't understand plz help me........

This field is a place where you can paste a custom function that will override the default action. By default, clicking on the image will bring you to the link in the longdesc attribute. Since drupal has poor support for this attribute, I get the link from the anchor tags and rewrite the output to the longdesc in the module theme function. All you need to do is paste that code in the onclick override box in your settings menu.

Thanks for the great post James. I am using Drupal 6 and with that the Views Image Flow D6 version. I would really like to make the images clickable to a separate link and the solution for yours sounds perfect. I see where to alter the code in Views, I just don't see how I can add the longdesc attribute to the block and get it recognized. Also, I am only able to add 5 images and the others aren't recognized. Any idea how I can accomplish this? I could desperately use some advice on this. Thanks!

I don't have anything to do with that module. However, I think that project Link Image Field adds both link support and longdesc support in Drupal 6 (doesn't add londesc in Drupal 7 though).

As far as 5 items go, I would guess that is what your view is limited to.

I know that you didn't work on that module but thank you for that - it worked!! Well, sort of. In IE I get this error message:

Webpage error details

Message: Invalid argument.
Line: 43
Char: 7
Code: 0
URI: site_name/modules/views_slideshow_imageflow/themes/js/views_slideshow_imageflow.js?h

Any idea what would cause this?

Thank you for your help!

Christie

I would need to look at the page. Please post or e-mail a link to the page that is causing the problem so I can troubleshoot it. It is pertinent to D7 stuff that I am working on. I am currently doing work on the Drupal 7 link image field module as it is a valuable and neglected (abandoned) resource.

Thanks

Jim

View the source and check to see if longdesc is getting added twice.

Thank you again for your help. I wanted to provide an update. I did create a link image field and it worked great for linking to URLs instead of the picture. I have another question though please. The reflection is not showing up in my slider and the slider bar show up in the middle of the images instead of below. Here is a link to my site as an example. http://squaresand.com/sqsb_mainD6/video

The reflections are a different animal. As far as I know they never worked in that module. You might get help posting on the drupal issues page for that module.

I just want to express my gratitude towards this module, Thanks! I've just used Views JQFX to intergrate with slidesjs (http://slidesjs.com) will contribute to drupal later!

Hey guys,
I already setiup imageflow sucesfully but when trying to use it for video, it does not work.
When you talk about "create a link for your content", you mean by adding this in the content type and in the view?
In the view itself I cannot link to a url right now.
Thx for the help

Hi,

Great module that you have created!!! Is it possible to extend the module without new development in the following ways:
1. Use the module to display any content, e.g. text & image contained in a div.
2. Support drag type scrolling without the horizontal scroll bar, e.g. on mobile devices with small screens.
3. Support the ability to see the textual description by clicking on the image & showing the "back" of the image text, similar to Apple image flow.

Thanks,

Chaim

Hi,

I've got the image flow but the onClick function doesn't work.
I am sure colorbox is working on its own page (no ImageFlow on that page).
But when I want to make it on ImageFlow, I failed.

I've tried both
1. function() { jQuery.colorbox( { href:this.getAttribute('longdesc'), title:this.title, iframe:true, innerWidth:480, innerHeight:390 } ); }

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

in the jQFX settings and it still doesn't work...

Is there any other thing I should configure?
Should I choose "Image" or "Colorbox" for Formatter in the field setting? (I've tried both and onClick is not working neither)

Really need your help...
Thanks.

KCHO

Your problem isn't the onClick function.

You are trying to link to something that won't open in a colorbox.

What is your imageflow image linked to?

When I added the code

"function() { jQuery.colorbox( { href:this.getAttribute('longdesc'), title:this.title, iframe:true, innerWidth:480, innerHeight:390 } ); }"

into "onClick" field, it can't be clicked. (When I clicked, nothing happens.)

But if I don't put that code int onClick field, and makes the "formatter" in field settings be "Image", it opens the embedded Youtube Video when I clicked on the image, it can link to the embedded Youtube video (of course, without colorbox effect)

I think the problem is the Views jQFX is not connected with colorbox... or not working well.

But I can use colorbox well independently (when not connecting with Views jQFX)

Do you do anything on colorbox to configure Views jQFX ImageFlow?

And there's one more thing,
I found that my ImageFlow won't work unless I changed the code in file "views-jqfx-imageflow.tpl.php"
from <..... class="views-jqfx-imageflow" > to <...... class="imageflow" >

I changed it to class="imageflow" and it shows up.
I don't know if it matters the collaboration with colorbox?

I figured it out, thanks :)

How did you end up getting the titles to show up?

Hi, everything works fine. I have ImageFlow and ColorBox working nice with YouTube Videos. The only thing i miss is to display a Title in Colorbox. Where the 'title' comes from? When i tried to hard code in the onclick function like this: "title:'test'" the "test" title displays ok on ColorBox. I tried various combinations of field formaters but with no luck.

From my understanding the captions are on by default. It doesn't display the captions for me though. I have a view setup as follows:

Title:None
FORMAT
Format:jQFX | Settings
Show:Fields | Settings

FIELDS
User: Uid
User: Picture
User: Name

The Uid is of the user, Picture is of the person and Name is the caption I'm trying to display. It doesn't appear to function as I'd like. When clicking on the images it loads all the images based on Uid. When clicked the next uid is grabbed and loads profile information. For whatever the reason it's not loading the profile names as the caption. Any thoughts?

Hi all!
I wanted to ask whether I could use this module to display nodes like they are displayed here http://www.eggrecipes.co.uk/mealsinminutes/ . In other words, can I display, besides images, the title and other fields of a node?
Thank you.

Hi James:

I would love to use your module but I can't get the 7.x-1.0-alpha3 version to work. I see an image that says "loading" with a count but then after it counts down to 0, I see nothing.

I posted a bug report at http://drupal.org/node/1958196 but got no response so I'm hoping I can get you here...

How should I start debugging what is wrong?

Your help is appreciated.

thanks,
Mona

after updating your module does not work! shows only the frames for pictures

Turn off the reflections in the module and use this:
http://drupal.org/project/imagecache_reflect

The new itok tokens break the reflections in the imageflow library.

Thanks for the post.Really looking forward to read more. Will read on ekdkdbdddafd

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Contact

Address
Lunar Clips Internet Media
2750 Figueroa Blvd
Unit #8
San Diego, CA 92109
Phone
(858) 353-4515