UMIhelp

Разработка дополнительного функционала => Разработка модулей => Тема начата: alex от 08 Мая 2011, 20:58:40

Название: featureCarousel
Отправлено: alex от 08 Мая 2011, 20:58:40
Неведанная НЯ творится с моим сайтом...
Пытаюсь в блоге отобразить фотки из альбома.
С настроеной jquery FC.

В модуле фотогалереи все работает НА УРА!, однако тут скрипт не выводит фотки. Он их просто достать не может, я только не пойму откуда.

Когда аботает скрипт,он находит фото а далее его масштабирует по разному. Если он его не находит, то соответственно хоть элементы img будут на своем месте, у них будут верные src, ведущие к картинкам, НО У ВСЕХ style такой, что width:0px; height:0px......и вместо фоток у меня крутятся пустые изображения...

Объясню...у меня страница блога автоматически подгружает в себя фотки из альбома с таким же названием.
Так вот, если в одной вкладке браузера открыть страницу альбома, например localhost/ferrari, на которой вертятся фотографии тачки, и в другой вкладке страницу про эту феррари из блога localhost/blog/ferrari, то ВСЕ ПАШЕТ,т.е. фотки в блоге тоже вертятся и тп..

Вобщем не понимаю почему карусель не пашет в блогах?
Название: Re:featureCarousel
Отправлено: alex от 09 Мая 2011, 08:42:07
Для img поставил border 2px white solid.
Теперь видно, что пустыеквадратики (только обводка) крутятся справа от карусели..

http://help-dev.umi-cms.ru/photoalbum.album.html
отсюда подставлял в свой post.xsl шаблоны для вывода.

вот этот в место куда хочу вывести (уже с каруселью)
<div id="featureCarousel">
<xsl:apply-templates select="document(concat('udata://photoalbum/album/',/result/page/@alt-name,'/'))/udata/items" />
</div>
эти ниже шаблона всей страницы
<xsl:template match="item">
     <div class="feature">
        <xsl:apply-templates select="document(concat('upage://', @id))/udata" mode="photoalbum"/>
        </div>
</xsl:template>

<xsl:template match="page" mode="photoalbum">

 <xsl:variable name="filepath" select=".//property[@name = 'photo']/value/@path" />

     <a href="{@link}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">400</xsl:with-param>
</xsl:call-template>
</a>
</xsl:template>


а это сам album.xsl
разница есть небольшая..
<xsl:template match="result[@module = 'photoalbum'][@method = 'album']">
<xsl:apply-templates select="document(concat('udata://photoalbum/album/',$document-page-id))/udata" />
</xsl:template>

<xsl:template match="udata[@module = 'photoalbum'][@method = 'album']" />

<xsl:template match="udata[@module = 'photoalbum'][@method = 'album'][total]">
<div id="featureCarousel">
<xsl:apply-templates select="items/item" mode="photo_list" />
</div>
<xsl:apply-templates select="total" />
</xsl:template>

<xsl:template match="item" mode="photo_list">

     <div class="feature">
        <xsl:apply-templates select="document(concat('upage://',@id))/udata/page" mode="photo_list" />
        
        </div>
</xsl:template>

<xsl:template match="page" mode="photo_list">
<a href="{@link}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">400</xsl:with-param>
</xsl:call-template>
</a>


</xsl:template>

черт...ЕСЛИ  убрать <div id="featureCarousel">...</div> в обработке, то фотки отображаются, все работает...что с самой каруселью?

КАК ЗАСТАВИТЬ БЛОГИ ОТОБРАЖАТЬ ФОТКИ ПО ШАБЛОНАМ ФОТОГАЛЕРЕЙ?
или сделать абсолютно идентичными!...
чтобы карусель работала!
Название: Re:featureCarousel
Отправлено: admin от 09 Мая 2011, 10:24:49
В вопросе много такого, что для меня не однозначно описывает ситуацию,

Могу предположить, что решение вопроса надо искать в одном из 3 мест.

1. Какие-то входные параметры, которые ты используешь в вызовах макросов, пустые или не верные (проверяй все "/result/page/@alt-name" и прочие variable и param которые ты используешь при вызовах макроса)
2. Возможно, проблема в самих шаблонах, например какое-то сомнительное место вызвать макрос такой строчкой
<xsl:apply-templates select="document(concat('udata://photoalbum/album/',/result/page/@alt-name,'/'))/udata/items" />

и видимо ожидать что этот блок будет обрабатываться шаблоном

<xsl:template match="item">
       <div class="feature">
        <xsl:apply-templates select="document(concat('upage://', @id))/udata" mode="photoalbum"/>
        </div>
</xsl:template>

я что-то не вижу шаблона для обработки items, которого ты получаешь в xsl:apply-templates

Так что проверь вначале без FC, выводятся ли сами фотки

3. Ну и если два предыдущих пункта работают и сами фотки выводятся, то проблема в FC. Возможно, при обработке фоток она их корежит. Тут сложно чего сказать, тыкая пальцем в небо, но судя по некоторым местам, могу предположить, посмотреть в сторону указания высоты и ширины в опциях вызова featureCarousel (вроде как тут описано http://www.bkosborne.com/jquery-feature-carousel/options),
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 08:26:36
По поводу item s
ITEMS- запрашива.тся элементы ITEM, которые приходят из дрпугого шаблона, и для каждого из ITEM'ов применяется уже наш.

А вот если в шаблоне Post.xsl убрать либо <div id="featureCarousel"> либо в самом item убрать <div class="feature">, то фотки выводятся,просто одна за другой....

Куда копать?
Может подскажешь другую карусельку красивую? Или где в этой недочет?
Название: Re:featureCarousel
Отправлено: admin от 10 Мая 2011, 10:12:33
то есть все выводиться прекрасно если к фоткам не применять карусель? тогда пункт третий, пробовал прописать в опциях вызова карусели высоту и ширину фоткам?
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 11:51:19
Черт! так ведь и знал...
проблема в следущем!!!!
у меня есть блок галереи, его ID=num3

Через jquery я по клику
$('#num3').show();

До этого он скрыт методом
$(document).ready(function(){$('#num3').hide();});

Короче если убрать эти скрыть отобразить, то все пашет....
никак не пойму почему так..


---------------------------------добавил

Вот еще поэксперементировал:
1)если не через show() hide(), а например .css('visibility','hidden') сделать, то блоки не видно, но они занимают место. Пробую их сделать position:absolute, но тога все что ниже залазиет на них,когда они показаны так же,как и когда скрыты.
2)если .css('display','none'), то да, их не видно, когда надо показываются..но эффект тот же,что и hide и show..галерея пустая.

Название: Re:featureCarousel
Отправлено: admin от 10 Мая 2011, 12:35:50
Дело в том что если покопаться в коде js лайтбокса или в  твоем случае в FC, то становиться видно что он не обрабатывает картинки которые скрыты, то есть ты хочешь сделать из этих картинок карусель, но они скрыты и FC их игнорирует.

Выход такой, я так понимаю у тебя несколько галерей и ты открываешь их по ссылке и хочешь чтобы они сразу были FC галереей.

Вызови обработку фоток и превращение их в галерею, после того как ты отобразишь их, то есть вначале show() ,а затем уже вызов FC и атк каждый раз когда делаешь show для скрытой до того галереи

Второй вариант сделать стили у галерей которые нужно скрывать что-то типа position:absolute left:-100000px тогда карусель будет вне поля видимости, но все еще будет существовать, а когда тебе надо будет её отобразить вместо $('#num3').show(); сделаешь $('#num3').css('position:static;');

что то в таком духе и пощи в интеренете, как делать всякие js галереи если исходные фотки скрыты, не ты первый сталкиваешься с такой проблемой. Может еще какие решения есть
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 14:10:33
решилась проблема! спасибо!!!!
стал применять карусель не при загрузке документа, а непосредственно при клике на ссылку.
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 15:25:04
Блин....лажа какя-то...вот у меня ссылка, при клике на нее идет show() блока, в котором карусель и $("#featureCarousel").featureCarousel({});...ну работает...НО ЕСЛИ ЕЩЕ РАЗ НАЖАТЬ, то вообще ужас что начинает твоится,все кудато улетает (фотки), крутятся хаотично...просто ужас...

вобщем несколько ссылок, несколько блоков.на клик по ссылке идет цикл, если id блока равен id ссылке, то он show() иначе hide().
и проверка если id равен 3 (это вкладка "галерея"), то еще и выполняется функция,которую выше указал.

Проблема какраз в том, что первый раз все норм,а вот если другую вкладк открыть и снова на карусель вернуться, то вообще страх, а не карусель..!
просмотрел ее код и мой код...не нашел момент изза которого может подобное случаться
Название: Re:featureCarousel
Отправлено: admin от 10 Мая 2011, 15:31:46
ну я предполагаю что он еще раз обрабатывает фотки и добавляет вокруг них необходимые элементы чтобы они крутились, но так как такие элементы уже есть то там получается полный кавардак
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 15:57:39
В фотоальбоме вроде все нормально работает...да и с этими шаблонами может что напутал...как можно просто как фреймы делают,наподобии, вставить фотоальбом в страницу.

ТОЕСТЬ ПРЯМ КАК INCLUDE в php.

я бы написал include ('/album_name'/).
естественно имя альбома я знаю! только не хочу как сейчас выцепливать отдельно элементы,их обрабатывать...а прям вставить и все.

Название: Re:featureCarousel
Отправлено: admin от 10 Мая 2011, 16:03:28
вставить альбом как include? не знаю чем тебе тут помочь, мне кажеться ты пытаешься сделать все куда сложнее, как звучит задача изначально?
Название: Re:featureCarousel
Отправлено: alex от 10 Мая 2011, 16:31:06
ахх...да задача одна...несколько ссылок,несколько блоков.
один из блоков - галерея.

но жквери глючит(галерея)...
так что сейчас, после неудачного поиска "ИЗЗА ЧЕГО?"...перешел к поиску другой галереи....ну а если так и будет любая глючить..даже не знаю((


----------------------все решилось


ЕСТЬ ВОПРОС:
как сделать чтобы
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">480</xsl:with-param>
<xsl:with-param name="height">360</xsl:with-param>
</xsl:call-template>

мне не обрезало картинку,а сжимало,Если вдруг картинка не соответствует пропорциям?
Название: Re:featureCarousel
Отправлено: admin от 11 Мая 2011, 02:30:21
обрезать или сжимать определяется тем, каким макросом обрабатывается фотка приведи полный кусок кода.

Как фотка вызывает шаблон <xsl:call-template name="catalog-thumbnail">

и что происходит в шаблоне <xsl:call-template name="catalog-thumbnail">
Название: Re:featureCarousel
Отправлено: alex от 12 Мая 2011, 15:36:46
layots/default.xsl
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://i18n/constants.dtd:file">
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:umi="http://www.umi-cms.ru/TR/umi">
<xsl:template match="/" mode="layout">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<xsl:value-of select="$document-title" />
</title>
                
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />
<script charset="utf-8" src="/js/site/__common.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/css/design/common.css" />
<script type="text/javascript" src="/js/jquery/jquery-1.4.4.min.js"></script>
                <script type="text/javascript" src="/js/jquery.waterwheelCarousel-1.2.2.js"></script>
                <script src="/js/jquery/guide.js" type="text/javascript"></script>
</head>
<body><div id="main">
<div id="content">
        <xsl:apply-templates select="result" />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

bolgs20/post.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:date="http://exslt.org/dates-and-times"
xmlns:udt="http://umi-cms.ru/2007/UData/templates"
xmlns:umi="http://www.umi-cms.ru/TR/umi"
exclude-result-prefixes="xsl date udt">
<xsl:template match="result[@module = 'blogs20'][@method = 'post']">
<div id="waterwheel-carousel-default">
    <div class="carousel-controls">
        <div class="carousel-prev"><a href="#">&lt;</a></div>
        <div class="carousel-next"><a href="#">&gt;</a></div>
    </div>
<div class="carousel-images">
     <xsl:apply-templates select="document(concat('udata://photoalbum/album/',/result/page/@alt-name,'/'))/udata/items" />
    </div>
</div>
</xsl:template>
    


<xsl:template match="item">
<xsl:apply-templates select="document(concat('upage://',@id))/udata/page" mode="photo_list" />
</xsl:template>
<xsl:template match="page" mode="photo_list"></xsl:template>

</xsl:stylesheet>

photoalbum/album.xsl
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://i18n/constants.dtd:file">

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:date="http://exslt.org/dates-and-times"
xmlns:udt="http://umi-cms.ru/2007/UData/templates"
xmlns:umi="http://www.umi-cms.ru/TR/umi"
exclude-result-prefixes="xsl date udt umi">

<xsl:template match="result[@module = 'photoalbum'][@method = 'album']">
<xsl:apply-templates select="document(concat('udata://photoalbum/album/',$document-page-id))/udata" />
</xsl:template>

<xsl:template match="udata[@module = 'photoalbum'][@method = 'album']" />

<xsl:template match="udata[@module = 'photoalbum'][@method = 'album'][total]">
<div id="featureCarousel">
<xsl:apply-templates select="items/item" mode="photo_list" />
</div>
<xsl:apply-templates select="total" />
</xsl:template>

<xsl:template match="item" mode="photo_list">

     <div class="feature">
        <xsl:apply-templates select="document(concat('upage://',@id))/udata/page" mode="photo_list" />
        
        </div>
</xsl:template>

<xsl:template match="page" mode="photo_list">
<a href="{@link}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">440</xsl:with-param>
                    <xsl:with-param name="height">320</xsl:with-param>
</xsl:call-template>
</a>


</xsl:template>

</xsl:stylesheet>

И как всетаки CROP сделать? чтобы тянуло, а не резало.

и мне главное фото вывести, любым способом. так, чтобы crop был..