Image Pager module: Dynamically switch among images with prev/next links
Image Pager, a new Drupal module I just contributed, provides a block that displays a selected subset of a page's images. The images are shown one at a time; the user can dynamically switch among them using previous/next links. Each image's alt and title text is shown as a caption. This article's original location demonstrates Image Pager with photos from my 2006 summer vacation.
Image Pager is designed to work with existing node types and themes without requiring changes to either. When the Image Pager block is displayed, it uses jQuery to scan the web page, identify the images to be shown in the Pager, hide them so they are not shown in their original location on the page, and redisplay them within the Pager.
Image Pager's jQuery can also be used on its own without Drupal; see below for details.
Selecting images
The set of images that Image Pager displays (and hides in their original location) is determined by a CSS (1, 2, or 3) or XPath selector. The default selector is ".node .content img" which means that all images in the content area of a node (or a node teaser) are included. If you only want Image Pager to be active for node pages and not for teasers, you can see the Image Pager Block settings so it only displays on "node/*" pages.
You can override the theme function image_pager_selector to return a different selector as as string. For example, in your template.php:
function phptemplate_image_pager_selector() {
return 'img.show-in-pager';
}This would cause all images anywhere on the page with the "show-in-pager" class to be displayed in the pager.
Styling images and graceful degredation
You can style the images displayed in the Image Pager with CSS. If you are using the default Image Pager layout (see below), the selector '.image-pager img' will work. On this page, I'm using:
.image-pager img {
border: 1px solid gray;
padding: 3px;
background-color: white;
}Image Pager does not work if JavaScript is not available. To keep your pages useful and attractive, just make sure your images are styled to look good in their original location. On this page, for example, I'm using (the .field-field-images class selector is because I'm using a CCK field called 'images' to display the images):
.field-field-images img {
float: right;
clear: right;
border: 1px solid gray;
margin: 0.5em 0 0.5em 1em;
padding: 3px;
background-color: white;
}You can turn Image Pager off to simulate a no-JavaScript environment and
turn it back on to see the difference.
Changing the pager layout
You can change the layout of the Image Pager itself by overriding the theme function image_pager_block. The default function is:
function theme_image_pager_block() {
return ('<div class="image-pager">'.
'<div class="pager">'.
' <a class="prev">« Prev</a>'.
' <span class="count"></span>'.
' <a class="next">Next »</a>'.
'</div>'.
'<div class="image"><a><img /></a></div>'.
'<div class="caption"></div>'.
'<div class="credit"></div>'.
'<form action="/">'.
' <input type="hidden" name="sel" value="'.
str_replace('+','%20',urlencode(theme('image_pager_selector'))).
'" />'.
'</form>'.
'</div>');
}The Image Pager JavaScript looks for an object with the class "image-pager" and then looks inside of it for objects with class "prev", "next", "image", "catpion", and "credit". If you omit one of these objects, that part of the Image Pager will simply not be shown. The "image" object should contain an <img> tag which is used to display the paged images.
The little dance with the <form> inside the image-pager is how I pass the output of theme('image_pager_selector') from the server to the client-side JavaScript. If anyone know a better way to do this, let me know.
Image sizes
Image Pager does not manipulate the sizes of the images it finds to display; that is your responsibility. The Drupal image module allows you to control the size of upload images. If you are using CCK, I suggest using the imagecache module.
If the "image" object inside "image-pager" HTML block contains an <a> tag, the anchor's href will be a link to the current page with the query "?image=<num>" appended. This allows "click to enlarge" functionality, especially if the images in the pager come from a CCK imagefield, but you will need to write a custom node template to make it work. There are probably better ways to implement this feature.
Using Image Pager without Drupal
To use Image Pager without Drupal, download the Drupal module. Load image_pager.js into your web page and manually add an "image-pager" block like the one output by the theme_image_pager_block() PHP function shown above.
Sponsor
Event Publishing LLC
http://www.event-solutions.com
Comments
Looks like there is no Image
Looks like there is no Image Pager block on this page. Maybe you set it only for authenticated users ? (using Opera 9)
Ooops! You're right, I had
Ooops! You're right, I had it set to display only for myself while I was testing it. Fixed.
It does not work in drupal 5
It does not work in drupal 5
This site is running Drupal
This site is running Drupal 5, and it works fine.
How is it not working for you? Are you getting an error message?
Is it possible to allow the
Is it possible to allow the admin to configure an option not to hide the images at their original locations ?
I can foresee a few adaptations for this module :
- allow auto slideshow with a play/pause button.
- some backend resizing of photos, perhaps not on-the-fly but on running cron.php.
Continue to keep the module code small though.
Yes, an option not to hide
Yes, an option not to hide the original images is possible. Please submit a feature request issue at drupal.org for the Image Pager project.
As for resizing of photos, that can be accomplished with Image Exact Sizes (image module) or Imagecache (imagefield module with CCK).
Works great in drupal. Can't
Works great in drupal. Can't find an easy way to make the image link to the fullsized image / or node
Any help would be greatly appreciated. Still trying to get a grasp on this jquery stuff.
There presently is no easy
There presently is no easy way to do it.
Image Path makes each image in its viewer be a link to href="?image=N" where N is the image number minus one (for image 1, N=0). The browser interprets this link as being to the current URL with the ?image query appended. You can see this by hovering over the image at the top-left of this page.
My current solution is to change the node template to look for this query string and behave differently. The way to change the node template depends on how your images are being displayed. I've been using CCK's imagefield. Suppose your CCK type named mytype has an imagefield field named photos. Here is a stripped-down example showing how you might set up node-content_mytype.tpl.php in your theme directory:
<div class="node"><span class="submitted"><?php print $submitted?></span>
<span class="taxonomy"><?php print $terms?></span>
<?php if (isset($_GET['image']) && isset($node->field_photos[$_GET['image']])): ?>
<?php {
$photo = $node->field_photos[$_GET['image']];
print theme('imagecache', 'larger_image_page',
$photo['filepath'],
$photo['alt'], $photo['title']);
} ?>
<p><?php print $photo['alt'] ?><br><?php print $photo['title'] ?></p>
<?php else: ?>
<div class="content"><?php print $content?></div>
<?php endif; ?>
<?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?>
</div>
The template starts off with a normal node div (simplified for demonstration) and the submitted-by and taxonomy terms display. Then, if $_GET['image'] exists and references an existing image in the CCK photos field, it displays just the image with its alt and title text using the imagecache module. Otherwise, it display's the node's $content field normally. Finally, links are always shown at the end.
This is fine if you know how to do it, but a simpler solution would certainly be preferable.
I am searching for a module
I am searching for a module to display images in a "image_gallery" in slideshow, so they don't have to click "next" every time.
Is it easy to make your code do this?
(new to Drupal, if it is easy I will try this, if not I will seek for an easier goal first...)
It's easy with a little
It's easy with a little Javascript. You could use setInterval() to invoke a simple function to page through the images.
Javascript slideshow code
Javascript slideshow code would help me too-- could someone post some sample code?
I fing image gallery help me
I fing image gallery help me ?
Would just like to say a
Would just like to say a huge thanks for this module - just what I needed, works beautifully, quick to install, well documented and easy to customise. Had been beating my head on this problem for a bit: this solved it in about half an hour.
I am using it with a custom view which calls out the images I want to display on each page by taxonomy. Just had to change the classes so that the images displayed in the pager are the ones from my custom view block, not the main node.
Great module!
I downloaded the lighbox
I downloaded the lighbox module and it also works perfect. You also get the previous and next buttons, nonetheless you get the pop up from the javascript.
Anyways, good module...
Jenn
I am pratically new to
I am pratically new to Drupal and i am trying out a lot of thing last days that make me very enthusiastic!
So i also tried this module which i like very much but i want to make a minor change that is also described here. The only
problem is i can't get it done.
I want only images from one certain type or folder of my drupal system to display in the pager. I understand that i have to change a bit of code in the template.php of my theme, but when i do this the whole site is down and i have to change back to fix this.
Can someone explain me how to do this?
This module is a great
This module is a great contribution. However I need it to function slightly differently. I need to create a content type (using cck and image cache) that will allow users to upload a number of images to the content type.
Then, when the content type is displayed, the images would ideally be displayed in a paged format (with previous/next links) such as your module allows. However, I need this to happen atuomatically and I don't want it to appear in a block. Is there a way to use your module to do this?
Thanks
The body of your post can't
The body of your post can't be seen. Is it private?
Or there are no body text, just images? Where can one find the documentation of this module?
Is there a demo? I was
Is there a demo? I was looking to see an example, couldn't find it neither here nor at drupal.org. Can you give a link to a page that uses this module? Thnx
I cannot see any demo on
I cannot see any demo on this page.
Its just text, is it a permissions issue?
It appears the first example
It appears the first example is incorrect. For me using 'img.class-name' fails to make the pager work (all the images appear as normal), but using '.classname img' (as you would with css) causes the pager to appear correctly.
This is how it appears in the actual module…
function theme_image_pager_selector() {return '.node .content img';
}
The same as css.
This could be simpler for
This could be simpler for users of lightbox, the html returned already contains the code to launch the lightbox 'popup'. Your module strips it out when the images appear in an image_pager.
It would be better if that didn't happen, lightbox can easily be set up to allow previews that enlarge into originals, using the node settings for the image_field display.
Post new comment