Хак «из тумбы в лайтбокс»
Слишком часто натыкаюсь на форуме на вопрос как сделать вывод изображения сразу в лайтбокс из тумбы (малой превьюшки)
Этот вопрос я решел реализовать в своей сборке DG и вот что получилось:
Файл admin. datsogalery.php
После строк:
echo "<td align=\"left\" valign=\"top\"><strong>" . _DG_USE_PATHWAY . "</strong></td>\n";
echo "<td align=\"left\" valign=\"top\">";
$yn_ad_pathway = JHTML::_('select.genericlist', $yesno, 'ad_pathway', 'class="inputbox"', 'value', 'text', $ad_pathway);
echo $yn_ad_pathway;
echo "</td>\n";
echo "<td align=\"left\" valign=\"top\">" . dgTip(_DG_USE_PATHWAY_I). "</td>\n";
echo "</tr>\n";
Добавил:
//////////////////////////////////////////////////////////
echo "<tr align=\"left\" valign=\"middle\">\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "</tr>\n";
//Открывать изображение сразу в LiteBox
echo "<tr align=\"left\" valign=\"middle\">\n";
echo "<td align=\"left\" valign=\"top\"><strong>" . _DG_IMAGES_GO_LITEBOX . "</strong></td>\n";
echo "<td align=\"left\" valign=\"top\">";
$yn_ad_images_go_litebox = JHTML::_('select.genericlist', $yesno, 'ad_images_go_litebox', 'class="inputbox"', 'value', 'text', $ad_images_go_litebox);
echo $yn_ad_images_go_litebox;
echo "</td>\n";
echo "<td align=\"left\" valign=\"top\">" . dgTip(_DG_IMAGES_GO_LITEBOX_I). "</td>\n";
echo "</tr>\n";
//ставить значек перехода в среднй размер
echo "<tr align=\"left\" valign=\"middle\">\n";
echo "<td align=\"left\" valign=\"top\"><strong>" . _DG_IMAGES_GO_MEDBOX . "</strong></td>\n";
echo "<td align=\"left\" valign=\"top\">";
$yn_ad_images_go_medbox = JHTML::_('select.genericlist', $yesno, 'ad_images_go_medbox', 'class="inputbox"', 'value', 'text', $ad_images_go_medbox);
echo $yn_ad_images_go_medbox;
echo "</td>\n";
echo "<td align=\"left\" valign=\"top\">" . dgTip(_DG_IMAGES_GO_MEDBOX_I). "</td>\n";
echo "</tr>\n";
//Увеличенные картинки в категории
echo "<tr align=\"left\" valign=\"middle\">\n";
echo "<td align=\"left\" valign=\"top\"><strong>" . _DG_SHOW_IMG_IN_CAT . "</strong></td>\n";
echo "<td align=\"left\" valign=\"top\">";
$yn_ad_showimg_in_cat = JHTML::_('select.genericlist', $yesno, 'yn_ad_showimg_in_cat', 'class="inputbox"', 'value', 'text', $yn_ad_showimg_in_cat);
echo $yn_ad_showimg_in_cat;
echo "</td>\n";
echo "<td align=\"left\" valign=\"top\">" . dgTip(_DG_SHOW_IMG_IN_CAT_I). "</td>\n";
echo "</tr>\n";
//////////////////////////////////////////////////////////
echo "<tr align=\"left\" valign=\"middle\">\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "<td align=\"left\" valign=\"top\"> </td>\n";
echo "</tr>\n";
/////////////////////////////////////////////////////////
Сие означает появление в админке->настройках на вкладке опции трех дополнительных параметров.
А именно:
1. Выводить изображение из категории в лайтбокс
2. Выводить значек на превью, для перехода на средний размер (эта вещь заложена с целью таки выводить средний размер картинки. Зачем ограничивать юзера в возможности просмотра дополнительной информации к изображению)
3. Выводить увеличенные картинки в разделе (это небольшой хак для того что бы хоть как то укрупнить картинку до щелчка мыши)
Далее после строки:
$config .= "\$ad_comtitle = \"" . JRequest::getVar('ad_comtitle', 0, 'post', 'int'). "\";\n";
Добавил вот это:
$config .= "\$ad_images_go_litebox = \"" . JRequest::getVar('ad_images_go_litebox', 0, 'post', 'int'). "\";\n";
$config .= "\$ad_images_go_medbox = \"" . JRequest::getVar('ad_images_go_medbox', 0, 'post', 'int'). "\";\n";
$config .= "\$yn_ad_showimg_in_cat = \"" . JRequest::getVar('yn_ad_showimg_in_cat', 0, 'post', 'int'). "\";\n";
С этим файлом все.
Теперь беремся за файл dgstyle.css и добавляем в нем:
.dg_gr_img_go_med {
padding:2px;
margin:10px;
width: 16px;
height: 16px;
position: absolute;
}
В #dhtmltooltip комментим строку: width: 100%;
Идем далее.
Файл datsogalery.php
В начале файла, где идет описание инклудов и яваскрипт
$javascript .= "<link rel=\"stylesheet\" href=\"" . JURI::base(). "components/com_datsogallery/css/dgstyle.css\" type=\"text/css\" />\n";
добавляем вот это
if ($ad_lightbox) {
$javascript .= "<script type='text/javascript' src='" . JURI::base(). "components/com_datsogallery/libraries/clearbox/js/clearbox.js'></script>\n";
$javascript .= "<link rel='stylesheet' href='" . JURI::base(). "components/com_datsogallery/libraries/clearbox/css/clearbox.css' type='text/css' />\n";
$javascript .= "<script type='text/javascript'>
var
CB_PicDir='" . JURI::base(). "components/com_datsogallery/libraries/clearbox/pic/',
CB_NavTextClose='" . _DG_CB_CLOSE . "'
;
</script>\n";
}
Затем банально заменяем этот код
$dghits = _DG_HITS;
$dgvotes = _DG_RATING;
$dgcomment = _DG_COMMENT1;
$tle = jsspecialchars($row1->imgtitle);
echo "<a href='" . JRoute::_("index.php?option=com_datsogallery&func=detail&catid=$catid&id=$row1->id&Itemid=" . $Itemid). "'";
echo "onmouseover=\"showttip('";
echo "<strong>$tle</strong>";
if ($ad_showimgcounter > 0) {
echo "<br />$dghits: $row1->imgcounter";
}
if ($ad_showrating > 0) {
echo "<br />$dgvotes: $frating ";
}
if ($ad_showcomment > 0) {
echo "<br />$dgcomment : $comments";
}
echo "');\"";
echo "onmouseout=\"hidettip();\"><img src='$thumbnailpath$row1->imgthumbname' id='dg-image' alt='" . $tle . "' /></a><br />";
На вот такой код:
$dghits = _DG_HITS;
$dgvotes = _DG_RATING;
$dgcomment = _DG_COMMENT1;
$tle = jsspecialchars($row1->imgtitle);
$stringinfobox= "<strong>".$tle."</strong /><br />";
$pathimages1 = JURI::base(). $ad_pathimages . "/";
if ($ad_showimgcounter > 0)
{
$stringinfobox.=$dghits.": ".$row1->imgcounter."<br />";
}
if ($ad_showrating > 0)
{
$stringinfobox.= $dgvotes.":". $frating ."<br />";
}/**/
if ($ad_showcomment > 0)
{
$stringinfobox.= $dgcomment.":". $comments ."<br />";
}
$FlPublished = intval($row1->published1);
///////////////////////////////////////////////////////
//Вывод на лайтбокс сразу из категории
$dg_s_c_return = "<div style='position: static; max-width: ".$ad_thumbwidth."px; max-hight:".$ad_thumbheight."px;'>";
if ($ad_images_go_litebox)
{
$dg_s_c_return .= '<div class="dg_gr_img_go_med">';
if ($ad_images_go_medbox)
{
$dg_s_c_return .= "<a href='" . JRoute::_("index.php?option=com_datsogallery&func=detail&catid=$catid&id=$row1->id&Itemid=" . $Itemid). "#img_med' ";
if ($yn_ad_showimg_in_cat)
{
$dg_s_c_return .= "onmouseover=\"showInfo('".$stringinfobox."','".$pathimages1.$row1->imgthumbname."')\" onmouseout=\"hidettip();\" ";
}
$dg_s_c_return .= ">";
$dg_s_c_return .= '<img src="'.JURI::base().'components/com_datsogallery/images/dg-info-icon.png" width="16" height="16" />';
$dg_s_c_return .= "</a>";
}
$dg_s_c_return .= '</div>';
if($ad_lightbox_fa)
{
$dg_s_c_return .= "<div >\n";
$img_med_title = jsspecialchars($imgtitle);
$dg_s_c_return .= "<a rel=\"clearbox\" href=\"". $wm ."oid=". $row1->id ."\" title=\"". $img_med_title ."\" onmouseover=\"removeAttribute(\"title\");showttip(\"". _DG_VIEW_ORG_IMAGE."\");\"\n";
$dg_s_c_return .= "onmouseout=\"hidettip();\"><img src=\"".$thumbnailpath.$row1->imgthumbname."\" class=\"imgxy\" name=\"SlideShow\" id=\"dg-image\"\n";
$dg_s_c_return .= "alt=\"". $imgtitle."\" /></a>";
$dg_s_c_return .= "<div id='ImgText' style='padding-top:5px;font-size:16px;'></div>\n";
$dg_s_c_return .= "</div>\n";
}
}
else
{
$dg_s_c_return .= "<a href='" . JRoute::_("index.php?option=com_datsogallery&func=detail&catid=$catid&id=$row1->id&Itemid=" . $Itemid). "#img_med' ";
if ($yn_ad_showimg_in_cat)
{
$dg_s_c_return .= "onmouseover=\"showInfo('".$stringinfobox."','".$pathimages1.$row1->imgthumbname."')\" onmouseout=\"hidettip();\" ";
}
$dg_s_c_return .= ">";
$dg_s_c_return .= "<img src='".$thumbnailpath.$row1->imgthumbname."' id='dg-image' alt='" . $tle . "' />";
$dg_s_c_return .= "</a>";
}
$dg_s_c_return .= "</div>";
echo $dg_s_c_return;
после строки
нужно добавить
$wm = JURI::base(). "index2.php?option=com_datsogallery&func=wmark";
$wm = str_replace("&", "&", $wm). "&";
после строки
echo "</tr>\n</table>\n";
добавляем
$dg_s_c_return = "<script type=\"text/javascript\"> \n";
$dg_s_c_return .= " function showInfo(title, name, dimensions) {\n";
$dg_s_c_return .= " HTML = '<div style=\"width:100%;text-align:center;vertical-align:middle;\">'+title+'<img style=\"border:1px solid Beige; margin:20px\" src='+name+' name=\"imagelib\" alt=\"No Pics\" height=\"250\"/></div>';\n";
$dg_s_c_return .= " showttip(html)\n";
$dg_s_c_return .= " }\n";
$dg_s_c_return .= "</script> \n";
echo $dg_s_c_return;
В языковом файле добавляем :
DEFINE('_DG_IMAGES_GO_LITEBOX', 'Выводить изображение из категории в лайтбокс');
DEFINE('_DG_IMAGES_GO_LITEBOX_I', 'Выводить изображение из категории в лайтбокс,<br /> не открывая средний размер');
DEFINE('_DG_IMAGES_GO_MEDBOX', 'Выводить значек на превью, для перехода на средний размер');
DEFINE('_DG_IMAGES_GO_MEDBOX_I', 'Выводить значек перехода на средний размер.<br /> Для включенного режима "Выводить изображение из категории в лайтбокс". ');
DEFINE('_DG_SHOW_IMG_IN_CAT_I', 'В категории выводится увеличенный<br /> эскиз при наведении на картинку.');
DEFINE('_DG_SHOW_IMG_IN_CAT', 'Выводить увеличенные картинки в разделе:');
Пробуем, эксперементируем, радуемся….
Просмотреть результат мона на моем сайте…
номера строк не привожу, так как это уже реализовано в моем модуле следующего релиза сборки...
И самое главное...Для перехода по картинкам в лайтбоксе пропишите вот так:
$dg_s_c_return .= "<a rel=\"clearbox[roadtrip]\" href=\"". $wm ."oid=". $row1->id ."\" title=\"". $img_med_title ."\" onmouseover=\"removeAttribute(\"title\");showttip(\"". _DG_VIEW_ORG_IMAGE."\");\"\n";
в замен строки:
$dg_s_c_return .= "<a rel=\"clearbox\" href=\"". $wm ."oid=". $row1->id ."\" title=\"". $img_med_title ."\" onmouseover=\"removeAttribute(\"title\");showttip(\"". _DG_VIEW_ORG_IMAGE."\");\"\n";
и будет вам
красивый переход туда и обратно, и
каруселька (скорость прокрутки наверное настраивается в clearbox.js)....
Вот такой фокИс....
09.02.2011, 07:39:46