Queremos crear una galería de imágenes, muy bien !!!, pero además queremos que dicha galería permita mover las imágenes de una posición a otra. Trabajando con jQuery, este nos ofrece el jq_sortable_element(), de mi parte no logré que este me funcionara como viene documentado en el nuevo plugin sfJqueryReloadedPlugin, por lo que me dí la tarea de crear mi propio jq_sortable_element. El siguiente código lo agregar en tu jQueryHelper.php.
/**
* Makes the elements matching the jQuery selector '$selector'
* sortable by drag-and-drop and makes an AJAX call whenever
* the sort order has changed. By default, the action called gets
* the serialized sortable
* element as parameters.
*
* Example:
*
'@order',
* )) ?>
* Additional options can be passed in the $options associative array
* and will be sent to jquery as parameters. For example:
* 'handle' => 'span' specifies that span elements within the
* sortable element are the element the user actually clicks on
* (although entire first-generation child elements of the
* sortable element get reordered as a result).
*
* Added by hvallenilla@aberic.com
* This Function has been modified by Henry Vallenilla
*/
function jq_sortable_element($selector, $options = array(),
$messenger = "response", $messageWait = "Wait...",
$messageSuccess = "Saved", $messageError = "Error")
{
// Cargamos los js requeridos
sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.widget.js');
sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.mouse.js');
sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.sortable.js');
$options = _parse_attributes($options);
$options['url'] = url_for($options['url']);
$options['type'] = 'POST';
$options = json_encode($options);
$result = ‹‹‹EOM
$(document).ready(
function()
{
$('#$selector').sortable(
{
update: function(e, ui)
{
var serial = jQuery('#$selector').sortable('serialize'
, {});
var options = $options;
options['data'] = serial;
//$.ajax(options);
$(function(){
$.ajax({
type: "POST",
url: options["url"],
data: options["data"],
dataType: "script",
beforeSend: function(objeto){
$("#$messenger").html('$messageWait');
$("#$messenger").animate({
opacity: 100,
}, 1500 );
},
success: function(msg){
$("#$messenger").html('$messageSuccess');
$("#$messenger").animate({
opacity: 0,
}, 1200 );
},
error: function(objeto){
$("#$messenger").html("$messageError");
}
});
});
}
} );
});
EOM;
return javascript_tag($result);
}
Es requerido tener los archivos jquery.ui.widget.js, jquery.ui.mouse.js y jquery.ui.sortable.js.
El próximo paso es trabajar en nuestro modulo.
TemplateSuccess.php<?php if ($Posters->getNbResults()): ?>
<tr>
<td align=”center”>
<div style=”margin:0 auto; margin-left: 15px;” id=”image_poster” >
<?php foreach ($Posters as $Poster): ?>
<div id=”elemento_<?php echo $Poster->getIdPoster();?>” class=”contentPicture”>
<div class=”imagePoster”>
<?php if(is_file(sfConfig::get(’app_directory_poster’).’view_’.$Poster->getImage())):?>
<?php echo image_tag(’/uploads/posters/view_’.$Poster->getImage(),’ alt=”" title=”" class=”" ’) ?>
<?php else:?>
<?php echo image_tag(’no_image_available.gif’,'width=”200px” height=”180px” ‘) ?>
<?php endif;?>
</div>
</div>
<?php endforeach; ?>
</div>
</td>
</tr>
<?php endif ?>
<!– Colocar al final –>
<?php echo jq_sortable_element(’image_poster’, array(
‘url’ => ‘module/changePosition’,
‘only’ => ‘contentPicture’,
),
‘response’,
‘<div class=”load”>Arranging positions … </div><br />’,
‘<div class=”load”>Positions saved</div><br />’
) ?>
Css:
.contentPicture {
float:left;
width:210px;
height:230px;
margin: 3px;
padding:6px;
background-color:#f5f7f9;
border-right: #b9cede solid 1px;
border-bottom: #b9cede solid 1px;
text-align:center;
cursor: move;
}
.right-element{position: absolute;right: 0;width: 15%;text-align:
right; /* depends on element width */}
.load{background-color: #7cb7e3;padding: 4px;color: #FFFFFF;}
Lo más probable que al ejecutar la acción, la estructura de su plantilla este descuadrada, ya queda de parte de cada quien acomodarlo a su manera, ya que quite muchas estilos personales de mi módulo para darle un toque sencillo y fácil de comprender.
action.class.php
public function executeChangePosition(sfWebRequest $request)
{
foreach ($request->getParameter('elemento') as $position => $id)
{
/** Update position **/
$poster = PosterPeer::retrieveByPK($id);
$poster->setPosition($position);
$poster->save();
}
}
Al seguir todos estos pasos, podrá posicionar sus imágenes en el orden que desee. Es importante señalar que a la estructura de la tabla deben agregar un nuevo campo, Ej. POSITION, este será el que controle qué imagen es primera y cual es la última
Hasta ola próxima entrega. Saludos
Henry Vallenilla
Symfony Developer
Email/Gtalk: henryvallenilla@gmail.com
Skype: hvallenilla
Caracas - Venezuela
www.matatigre.com
Compartir información en:
These icons link to social bookmarking sites where readers can share and discover new web pages.
