Question

在Liferay 6.1.1 CE GA2中使用轮播功能时，我发现轮播在Safari和Chrome中都能正常工作。

但是，图像不会在Firefox中显示。

为了让功能正常工作，我使用以下代码

创建了一个Webcontent Structure

<?xml version="1.0"?>

<root>
    <dynamic-element name="activeIndex" type="text" index-type="" repeatable="false">
        <meta-data>
            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
            <entry name="required"><![CDATA[false]]></entry>
            <entry name="instructions"><![CDATA[Index of the first visible item of the carousel]]></entry>
            <entry name="label"><![CDATA[activeIndex]]></entry>
            <entry name="predefinedValue"><![CDATA[0]]></entry>
        </meta-data>
    </dynamic-element>
    <dynamic-element name="timeInterval" type="text" index-type="" repeatable="false">
        <meta-data>
            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
            <entry name="required"><![CDATA[false]]></entry>
            <entry name="instructions"><![CDATA[Interval time in seconds between an item transition.]]></entry>
            <entry name="label"><![CDATA[timeInterval]]></entry>
            <entry name="predefinedValue"><![CDATA[0.75]]></entry>
        </meta-data>
    </dynamic-element>
    <dynamic-element name="maxImageHeight" type="text" index-type="" repeatable="false">
        <meta-data>
            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
            <entry name="required"><![CDATA[false]]></entry>
            <entry name="instructions"><![CDATA[Provide max height of image element. Min limit advisable is 40]]></entry>
            <entry name="label"><![CDATA[maxImageHeight]]></entry>
            <entry name="predefinedValue"><![CDATA[254]]></entry>
        </meta-data>
    </dynamic-element>
    <dynamic-element name="maxImageWidth" type="text" index-type="" repeatable="false">
        <meta-data>
            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
            <entry name="required"><![CDATA[false]]></entry>
            <entry name="instructions"><![CDATA[Provide max width of image element. Min limit advisable is 130]]></entry>
            <entry name="label"><![CDATA[maxImageWidth]]></entry>
            <entry name="predefinedValue"><![CDATA[600]]></entry>
        </meta-data>
    </dynamic-element>
    <dynamic-element name="ImageElementSet" type="selection_break" index-type="keyword" repeatable="true">
        <dynamic-element name="image" type="image" index-type="keyword" repeatable="false"></dynamic-element>
        <dynamic-element name="linkUrl" type="text" index-type="keyword" repeatable="false"/>
    </dynamic-element>
</root>

一个由

组成的网页模板

#set($imageWidth = $maxImageWidth.Data)
#set($imageHeight = $maxImageHeight.Data)
#set($imageWidthPx = $imageWidth + "px")
#set($imageHeightPx = $imageHeight + "px")
#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.Data)

<style type="text/css">
        .aui-carousel {
        -moz-user-select: none;
        margin: 20px 0;
    }
    .aui-carousel-item {
        border-radius: 10px 10px 10px 10px;
        text-indent: -9999em;
    }
    .aui-carousel li {
        margin: 0 !important;
    }
}

</style>

#set($totalCount = 0)
<div id="carousel">
    #foreach($imageElement in $ImageElementSet.getSiblings())
        #if($imageElement.image.getData() != "")
            #if($imageElement.linkUrl.getData() != "")
                <a href="$imageElement.linkUrl.Data">
                    <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
                </a>
            #else
                <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
            #end
            #set($totalCount = $totalCount + 1)
        #end
    #end
</div>

#if($totalCount > 0)
    <script>
        AUI().ready('aui-carousel', function(A) 
        { 
            var carousel = new A.Carousel(
            { 
                contentBox: '#carousel', 
                activeIndex: $activeIndexValue,
                intervalTime: $interval, 
                width: $imageWidth, 
                height: $imageHeight 
            }).render(); 
        });
    </script>
#end

然而，它并没有给出我需要的东西。

感谢您对如何使其发挥作用的见解。

Answer 1

我看到你的实时网站并调试了一下，我发现下面的css类中的text-indent css属性导致firefox出现问题。

.aui-carousel-item { border-radius: 10px; text-indent: -9999em; }

删除text-indent css属性会在firefox中显示图像，因此您可能需要为firefox调整此css属性。

Liferay 6.1旋转木马

1 个答案: