Иногда бывает необходимость при выводе ноды показать только первые 5 фотографий, и добавить кнопку "Еще фото" для загрузки остальных определенными порциями. Например, по нажатию кнопки "Еще фото" подгружаются следующие 5 фотографий ноды. Данную задачу будем решать написанием своего модуля, правкой tpl файла и навесим на все это дело немного javascript.

Для начала нам нужно немного отредактировать наш template файл. Допустим, пусть у нас тип контента называется advert, значит нам нужно создать в папке с темой файл node-advert.tpl.php и сделать там вывод наших первых 5-ти фотографий, а также кнопки "Еще фото" и дива куда будут помещаться подгружаемые фотографии. Код, который будет это делать приведен ниже:

node-advert.tpl.php

<div id="adv_images">
<?php
    $count = 0;
    foreach($node->field_photo as $nimg) {                
        if($count<5) {
            print theme('imagecache','ic_node_adv_img_580x525',$nimg['filepath']);
            $count++;
        }
    }
?>
</div>
 
<div id="photos"></div>
 
<div id="adv_btn"><p><button class="btn_more_photos" type="button" value="<?php print $nid; ?>;6">Ещё фото</button></p></div>

adv_images - это div где мы будем выводить наши первые 5 фотографий.

photos - div в который мы будем добавлять подгружаемые фотографии.

adv_btn - это наша кнопка. Здесь также есть информация (value=" print $nid; ;6">) о номере ноды и номеру фотки, начина с которой мы подгрузим следующую порцию по нажатии кнопки.

ic_node_adv_img_580x525 - название презета image cache.

Теперь перейдем к написанию модуля. В папке с модулями создаем подпапку lmodule и помещаем в нее два файла lmodule.info и lmodule.module следующего содержания:

lmodule.info

; $Id$
name = lmodule
description = test lmodule.
package = Example
version = VERSION
core = 6.x

lmodule.module

 
// $Id$ 
/** 
* @file
* lmodule.module
*/
 
// Еще фото --------
function lmodule_menu() {
    $items['photos/get/photos'] = array(
        'page callback' => 'lmodule_get_photos_ajax',
        'type' => MENU_CALLBACK,
        'access arguments' => array('access content'),
    );
    return $items;
}
 
function lmodule_get_photos_ajax($nid,$firstnum) {
    // new code ==================
    $node = node_load($nid);
    $currnum = 0;
    $count = 0;
    $result;
    foreach($node->field_photo as $nimg) {                
        if(($currnum>=$firstnum) && ($count<5)) {
            $result .= theme('imagecache','ic_node_adv_img_580x525',$nimg['filepath']);
            $count++;
        }
        $currnum++;
    }
    drupal_json(array('status' => 0, 'data' => $result));
    return;
    // end new code ==============
    // 
    // Код ниже не используется. просто на память
 
    $photo = lmodule_get_photo($nid,$firstnum); // returns the filepath of my photo
    $image = theme('image', $photo);
    drupal_json(array('status' => 0, 'data' => $image));
}
 
// Эта функция тоже не используется. на память
function lmodule_get_photo($nid,$firstnum) {
    $node = node_load($nid);
    $fimg = $node->field_photo[$firstnum];
    return $fimg['filepath'];
}

Функция lmodule_get_photos_ajax - получает id ноды и фото начиная с которого нужно сделать запрос 5-ти фотографий. Получает требуемую информацию и возвращает результат. Все что идет ниже "end new code ==============" - старый код, на него не обращайте внимания и можете не копировать, я его оставил просто себе на заметку.

Финальная часть состоит в написании javascript кода, который будет выполнять запрос к нашему модулю и выводить полученные фотографии

scripts.js

Drupal.behaviors.lmodule = function(context) {
  $('.btn_more_photos').bind('click', function(){
    var param = this.value.split(';');
    var nid = param[0];
    var firstnum = param[1];
    var intnum = parseInt(firstnum);
    var new_num = intnum+5;
    // update velue for next photos
    this.value=nid+';'+new_num;
 
    $.get('/photos/get/photos/'+nid+'/'+firstnum, null, imageDetails);
    return false;
  });
}
 
var imageDetails = function(response) {
  var result = Drupal.parseJson(response);
  $('#photos').append(result.data);
}

После выполнения всех описанных действий все должно работать. Если нет - спрашивайте.

P.S.: Я знаю о том, что в этом коде многое можно улучшить и добавить. Например, сделать административную часть для модуля, javascripts тоже перенести в модуль и т.д. Все делалось быстро и для конкретной задачи

Комментарии

в начале файла lmodule.module нужно поставить

Спасибо, поправил.

А под 7ку решение есть? Спасибо

Можно и под 7 ку сделать. Я думаю, что отличия будут не сильно большие. Хотя, я бы сейчас делал немного по-другому. Добавлю себе в TODO и когда будет время напишу статью актуальную для Drupal 7.

Добавить комментарий