By nikitas on

does anyone has tried to embed this jquery to drupal?
i just found it on the web and wondering how difficult would it be to do something like this .
thanx!

p.s : this the link of jQuery.popeye 2.0 http://dev.herr-schuessler.de/jquery/popeye/demo.html

⋅ Categories: Drupal 6.x

Comments

JayNL’s picture

JayNL commented

A tad of HTML, a bunch of CSS and the rest is jQuery. Should be fairly easy to generate its output through CCK + Views.

aac’s picture

aac commented

I would also be interested in this feature. Could you please explain in some more detail how it can be done using CCK and views.
Thanks

---~~~***~~~---
aac

pavel.karoukin’s picture

pavel.karoukin commented

There is template called content-field.tpl.php in CCK module folder. You can use it to override image fields and put all required markup for this plugin.

I.e. in order to override field called field_images (this is internal name) do this:
1) copy content-field.tpl.php into your theme folder
2) copy content-field.tpl.php into content-field-field_images.tpl.php (yes, you have to have both content-field and content-field-field_images templates)
3) do all adjustments of html in the separate content-field-field_images.tpl.php. You can add requried JS libraries via 

drupal_add_js('path/to/js/plugin');

That's it. =)

aac’s picture

aac commented

Thanks for such a simple solution.

---~~~***~~~---
aac

nikitas’s picture

nikitas commented

that's simple enough . . .
thanx for the tip!trully appreciated . . . :D . . .
basically i imagine that this a general way for every jquery plugin like this one . . right?

JayNL’s picture

JayNL commented

yes, it is. jQuery is nothing more than a bunch of JavaScript, that interacts with some HTML and CSS. If you let Drupal generate the necessary output, you can let jQuery do the rest.

JayNL’s picture

JayNL commented

double. plz delete.

chukakene’s picture

chukakene commented

Hello all,

I first saw this thread last week. Since then I've tried to follow the instructions. I'm afraid that I have failed in successfully executing these instructions. May I have them explained again in a simpler manner? Currently, i have both "content-field.tpl.php" and "content-field-field_images.tpl.php" within my template files. Within the block of my drupal site I have the following:

I also have this inside the php portion of my block:

$(document).ready(function () {
$('.popeye').popeye();
});

Can someone tell me how to correctly place this plugin?

Thanks in advance for helping me.

pavel.karoukin’s picture

pavel.karoukin commented

I do not see html code. Please, put it inside tags.

As for content-field templates - you do not need these, since you put your code into block already.

Generally, if you are useing block, just put example code from plugin page and be sure to select "Full HTML" input format.
Also, be sure to include jquery plugin itself. Either with

inside your block's html, or by including it into theme by puting jquery plugin into theme folder and adding something like this into theme's .info file: scripts[] = path/to/plugin.js (path should be relative to theme path)
chukakene’s picture

chukakene commented

link rel="stylesheet" type="text/css" href="popeye/css/popeye/jquery.popeye.css"
link rel="stylesheet" type="text/css" href="popeye/css/popeye/jquery.popeye.style.css"
link rel="stylesheet" type="text/css" href="popeye/css/site/site.css"

***Do I place these needed css files inside the file "content-field-field_images.tpl.php" or another?***

drupal_add_js('jquery.popeye-2.0.4.min.js');

**where do I place this code, in block, or in file? If file, which one?***

$(document).ready(function () { $('ppy2').popeye(); });

if (!$field_empty) :

print $field_type_css field- print $field_name_css ">
if ($label_display == 'above') :
print t($label) : 

endif;

 $count = 1;
    foreach ($items as $delta => $item) :
      if (!$item['empty']) :
print ($count % 2 ? 'odd' : 'even') ">
if ($label_display == 'inline') {
print($delta ? '' : '-first')">
print t($label) : 

}
print $item['view'] 

 $count++;
      endif;
    endforeach;

endif;

***was I supposed to customize this? If so what do I change?***

/
Next image
Previous image
Enlarge
Close

***This part seems pretty straight forward. Yet this code displays images in a vertical list absent of css and js. what is needed to layer and center these images and place them on a navigation and stage?***

Again, thanks. I'm still trying to figure this stuff out.

kcvata’s picture

kcvata commented

Hi,

I am using facebookstyle statuses micropublish module. I can upload images pretty easly. The images appear in the statuses. However, I can not make them enlarge upon a clkick on the image. It probably is a code work but I do not have a clue. Any help with that is highly appreciated.

Many thanks,

Korkut

sorensong’s picture

sorensong commented

I'd love to see this for D7. Especially since there is no Lightbox2+D7 yet.

steffenr’s picture

steffenr
Primary language German
Location Bremen
commented

The post is nearly 1 and half year old - but i just created a sandbox project providing a views / field-formatter integration of the jQuery.popeye plugin. Feel free to test and commit review / any issues..

http://drupal.org/sandbox/SteffenR/1786810