H,
I had a problem in a view with multiple images.
All of them was displayed together.
To solve this i change a little the module so it can support delta of images
(Enter a delta, or a comma-separated list of deltas that should be shown. For example: 0, 1, 4.)
I hope this is help someone.
hover_preview.module
<?php
/**
* Implements hook_library().
*/
function hover_preview_library() {
$libraries['imgPreview'] = array(
'title' => 'Image Preview',
'website' => 'http://plugins.jquery.com/project/imgPreview',
'version' => '0.22',
'js' => array(
drupal_get_path('module', 'hover_preview') . '/imgpreview.min.jquery.js' => array(),
),
'css' => array(
drupal_get_path('module', 'hover_preview') . '/hover_preview.imgpreview.css' => array(),
),
);
$libraries['imghover'] = array(
'title' => 'ImgHover',
'website' => 'http://code.google.com/p/jquery-image-hover/',
'version' => '2011.05.11',
'js' => array(
drupal_get_path('module', 'hover_preview') . '/jquery.imghover.js' => array(),
),
);
return $libraries;
}
/**
* Implements hook_field_formatter_info().
*/
function hover_preview_field_formatter_info() {
$formatters['hover_preview'] = array(
'label' => t('Hover Preview'),
'field types' => array('image'),
'settings' => array(
'image_style' => '',
'image_link' => '',
'hover_preview_style' => '',
'hover_preview_action' => '',
'hover_preview_delta' => '',
),
);
return $formatters;
}
/**
* Implements hook_field_formatter_settings_form().
*/
function hover_preview_field_formatter_settings_form($field, $instance, $view_mode, $form, &$form_state) {
// Build off of the Image field formatter settings.
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
$element = image_field_formatter_settings_form($field, $instance, $view_mode, $form, $form_state);
// Add the Hover Preview settings.
$element['hover_preview_action'] = array(
'#title' => t('Hover preview action'),
'#type' => 'select',
'#default_value' => $settings['hover_preview_action'],
'#required' => TRUE,
'#options' => array(
'imgpreview' => t('Image Preview'),
'replace' => t('Replace Image'),
),
);
$image_styles = image_style_options(FALSE);
$element['hover_preview_style'] = array(
'#title' => t('Hover preview style'),
'#type' => 'select',
'#default_value' => $settings['hover_preview_style'],
'#empty_option' => t('None (original image)'),
'#options' => $image_styles,
);
$element['hover_preview_delta'] = array(
'#type' => 'textfield',
'#title' => t('Delta'),
'#description' => t('Enter a delta, or a comma-separated list of deltas that should be shown. For example: 0, 1, 4.'),
'#size' => 10,
'#default_value' => $settings['hover_preview_delta'],
'#required' => TRUE,
);
return $element;
}
/**
* Implements hook_field_formatter_settings_summary().
*/
function hover_preview_field_formatter_settings_summary($field, $instance, $view_mode) {
// Build off of the Image summary.
$summary = image_field_formatter_settings_summary($field, $instance, $view_mode);
// Add in the Hover Preview action.
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
if (isset($settings['hover_preview_action']) && !empty($settings['hover_preview_action'])) {
$summary .= '<br />' . t('Hover preview action: @action', array('@action' => $settings['hover_preview_action']));
}
else {
$summary .= '<br />' . t('Hover preview action: Preview Image');
}
// Display the Hover Preview image style.
$image_styles = image_style_options(FALSE);
if (isset($image_styles[$settings['hover_preview_style']])) {
$summary .= '<br />' . t('Hover preview style: @style', array('@style' => $image_styles[$settings['hover_preview_style']]));
}
else {
$summary .= '<br />' . t('Hover preview style: Original image');
}
return $summary;
}
/**
* Implements hook_field_formatter_view().
*/
function hover_preview_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
$element = array();
$settings = $display['settings'];
//var_dump($settings['hover_preview_delta']);
if (isset($settings['hover_preview_delta'])){
$deltas = explode(",", $settings['hover_preview_delta']);
foreach ($deltas as &$value){
$value = (int)trim($value);
}
//var_dump($deltas);
}
// Each hover preview item is created with an image element.
foreach ($items as $delta => $item) {
if (isset($deltas[$delta]) && ($deltas[$delta] === $delta)){
//var_dump('---');
//var_dump($deltas);
//var_dump($delta);
$element[$delta]['#theme'] = 'hover_preview_image_formatter';
$element[$delta]['#item'] = $item;
// The title tag.
if (isset($item['title']) && !empty($item['title'])) {
$element[$delta]['#image']['title'] = $item['title'];
}
// The alt tag.
if (isset($item['alt']) && !empty($item['alt'])) {
$element[$delta]['#image']['alt'] = $item['alt'];
}
// The image path is contructed based on the image style.
if (isset($display['settings']['image_style']) && !empty($display['settings']['image_style'])) {
$element[$delta]['#image']['path'] = image_style_url($display['settings']['image_style'], $item['uri']);
}
else {
// If no image style is provided, we use the original image.
$element[$delta]['#image']['path'] = $item['uri'];
}
// The hover preview image style.
if (isset($display['settings']['hover_preview_style']) && !empty($display['settings']['hover_preview_style'])) {
$hover_uri = image_style_url($display['settings']['hover_preview_style'], $item['uri']);
$element[$delta]['#image']['attributes']['data-hover-preview'] = image_style_url($display['settings']['hover_preview_style'], $item['uri']);
}
else {
// If no hover preview style is provided, we use the original image.
$element[$delta]['#image']['attributes']['data-hover-preview'] = file_create_url($item['uri']);
}
// Provide the hover-preview class and the action (default is imgpreview).
$action = (isset($display['settings']['hover_preview_action']) && !empty($display['settings']['hover_preview_action'])) ? $display['settings']['hover_preview_action'] : 'imgpreview';
$element[$delta]['#image']['attributes']['class'][] = 'hover-preview-' . $action;
$element[$delta]['#image']['attributes']['class'][] = 'hover-preview';
// Check if the formatter involves a link.
switch ($display['settings']['image_link']) {
case 'content':
// Link to the entity content.
$uri = entity_uri($entity_type, $entity);
$element[$delta]['#path'] = array(
'path' => $uri['path'],
'options' => array('html' => TRUE),
);
break;
case 'file':
// Link directly to the file.
$element[$delta]['#path'] = array(
'path' => file_create_url($item['uri']),
'options' => array('html' => TRUE),
);
break;
}
// Special use cases for certain hover preview actions.
switch ($action) {
// Image Preview requires the imgPreview library.
case 'imgpreview':
$element[$delta]['#attached']['library'][] = array('hover_preview', 'imgPreview');
break;
// Image Preview requires the imgPreview library.
case 'replace':
$element[$delta]['#attached']['library'][] = array('hover_preview', 'imghover');
break;
break;
}
// The Hover Preview module requires the JavaScript to load the behaviors.
$element[$delta]['#attached']['js'][] = array(
'data' => drupal_get_path('module', 'hover_preview') . '/hover_preview.js',
'type' => 'file',
);
}
}
return $element;
}
/**
* Implements hook_theme().
*/
function hover_preview_theme() {
return array(
'hover_preview_image_formatter' => array(
'variables' => array('item' => NULL, 'image' => NULL, 'path' => NULL),
),
);
}
/**
* Returns HTML for the Hover Preview image formatter.
*
* @param $variables
* An associative array containing:
* - item: The array of element data.
* - image: The image to to display, containing the required classes.
* - path: An array containing the link 'path' and link 'options'.
*
* @ingroup themeable
*/
function theme_hover_preview_image_formatter($variables) {
// Render the image first.
$output = theme('image', $variables['image']);
// See if we are to output the image as a link.
if (!empty($variables['path'])) {
$path = $variables['path']['path'];
$options = $variables['path']['options'];
$output = l($output, $path, $options);
}
return $output;
}
Comments
Comment #1
tasoslo commentedComment #2
tasoslo commented