Teaser-Slider- anderer Effekt

Hallo, ich verwende den WOW Slider für meinen Shop der hat viele Möglichkeiten



Gruß Michael

PS Einach mal Google fragen ...

 

Hi,

bei Slider im Honeygrid kannst du 5 Effekte einstellen. Geht aber leider nur über eine image_slider-USERMOD.html

kopiere die Honeygrid/module/image_slider.html und speichere unter image_slider-USERMOD.html ab.

Du findest ganz oben (Version 3.2..)

Code:

<div class="swiper-container" data-gambio-widget="swiper" data-swiper-disable-translucence-fix="true" data-swiper-breakpoints='{literal}[{"breakpoint": 100, "usePreviewBullets": true, "slidesPerView": 1}]{/literal}' data-swiper-slider-options='{literal}{"effect": "fade", "speed": 1500, "nextButton": ".js-teaser-slider-next", "prevButton": ".js-teaser-slider-prev", "autoplay": {/literal}{$content_data.SET_INTERVAL}{literal}}{/literal}'>

Dort kannst Du den effect (Standardmäßig "fade") durch folgende Effekte ersetzen:

"slide", "fade", "cube", "coverflow" oder "flip"

Bei "fade" setzen wir oft auch den Speed auf 1500 dann slidet das softer.

Cache leeren!!

enjoi

ED

 

Sauber. Wusste nicht dass das geht.
Hoffe, Gambio erbarmt sich bald, und ermöglicht den Wechsel auf slide auch bei den Produktbildern...

 

Hi sirtet,

wo/was meinst Du mit slide bei den Produktbildern?

Noch ein Zusatz zu oben. Gambio hat bei vielen GX3 Versionen den oben geposteten Code angepasst. Nehmt also immer die image_slider.html aus Eurer aktuellen Version.

ED

 

Das da:
http://www.gambio.de/forum/threads/produktbilder-slideshow-slide-transition-statt-fade.26273
Verstehe immernoch nicht, warum das scheinbar niemandem ausser mir als Usability-Problem erscheint...

 

@Ed - ist es auch möglich dort alle oder mehrere einzusetzen - so das im Wechsel quasi mal slider, mal cube usw. kommt? Oder geht nur eins?

 

Hi mymaus,

wollte gerade nochmal etwas einkopieren und habe alles überschreiben.

So hier nochmal

Es geht leider nur ein Effekt, (soweit ich weiss). Was Du aber machen kannst - und das machen wir meist immer so wenn unsere Kunden das wünschen - Du kannst eine tolle Optimierung realisieren. Denn was bei der Desktop Ansicht gut aussieht, muss bei der mobilen Ansicht noch lange nicht optimal sein. Und umgekehrt genau so. Bei der Desktop Ansicht ist der fade Effekt immer noch einer der beliebtesten Effekte, er ist ruhig, unauffällig und doch da (bei manchen Webseiten dreht sich alles in alle Richtungen, slidet, fadet - man verliert komplett die Konzentration), bei der mobilen Ansicht hingegen erwartet der user, dass der Effekt seiner Streichbewegung folgt. Wir kombinieren deshalb die Effekte - bei Desktop Ansicht fade - bei der mobilen Ansicht coverflow oder machmal auch slide.

Einfach den kompletten Inhalt der image_slider-USERMOD.html (hier Version 3.2..) durch folgenden ersetzen

Code:

<div class="ed_slider-desktop">
<div class="swiper-container" data-gambio-widget="swiper" data-swiper-disable-translucence-fix="true" data-swiper-breakpoints='{literal}[{"breakpoint": 100, "usePreviewBullets": true, "slidesPerView": 1}]{/literal}' data-swiper-slider-options='{literal}{"effect":"fade", "speed": 1500, "nextButton": ".js-teaser-slider-next", "prevButton": ".js-teaser-slider-prev", "autoplay": {/literal}{$content_data.SET_INTERVAL}{literal}}{/literal}'>

    <div class="swiper-wrapper">

        {foreach name=imgBig item=img_array from=$content_data.IMG_DATA}

            {if $img_array.image_preview}
                {assign var="thumb_image" value="{$smarty.const.DIR_WS_IMAGES}slider_images/thumbnails/{$img_array.image_preview}"}
                {assign var="thumb_text" value=""}
            {else}
                {assign var="thumb_image" value=""}
                {assign var="thumb_text" value="{$img_array.image_title_text}"}
            {/if}

            {assign var="img_values" value="class=\"img-responsive center-block\" src=\"{$smarty.const.DIR_WS_IMAGES}slider_images/{$img_array.image_large}\" alt=\"{$img_array.image_alt_text}\" title=\"{$img_array.image_title_text}\""}

            <div class="swiper-slide" data-thumb-image="{$thumb_image}" data-thumb-text="{$thumb_text}">

                {if $img_array.image_area_array|@sizeof > 0}
               
                    <img {$img_values} usemap="#map2_{$smarty.foreach.imgBig.index+1}" />
                    <map id="map2_{$smarty.foreach.imgBig.index+1}" name="map2_{$smarty.foreach.imgBig.index+1}">
                        {foreach item=area_array from=$img_array.image_area_array}
                            <area id="area2_{$area_array.image_area_id}" shape="{$area_array.image_area_shape}" coords="{$area_array.image_area_coords}" href="{$area_array.image_area_link_url}" alt="{$area_array.image_area_title}" title="{$area_array.image_area_title}" target="{$area_array.image_area_link_target}" />
                        {/foreach}
                    </map>
               
                {elseif $img_array.link_url}
               
                    <a href="{$img_array.link_url}" target="{$img_array.link_target}">
                        <img {$img_values} />
                    </a>
               
                {else}
               
                    <img {$img_values} />
               
                {/if}
               
            </div>

        {/foreach}

    </div>

    <div class="swiper-pagination"></div>
    <div class="js-teaser-slider-prev swiper-button-prev"></div>
    <div class="js-teaser-slider-next swiper-button-next"></div>
</div>
</div>

<div class="ed_slider-mobile">
<div class="swiper-container" data-gambio-widget="swiper" data-swiper-disable-translucence-fix="true" data-swiper-breakpoints='{literal}[{"breakpoint": 100, "usePreviewBullets": true, "slidesPerView": 1}]{/literal}' data-swiper-slider-options='{literal}{"effect":"coverflow", "speed": 600, "nextButton": ".js-teaser-slider-next", "prevButton": ".js-teaser-slider-prev", "autoplay": {/literal}{$content_data.SET_INTERVAL}{literal}}{/literal}'>

    <div class="swiper-wrapper">

        {foreach name=imgBig item=img_array from=$content_data.IMG_DATA}

            {if $img_array.image_preview}
                {assign var="thumb_image" value="{$smarty.const.DIR_WS_IMAGES}slider_images/thumbnails/{$img_array.image_preview}"}
                {assign var="thumb_text" value=""}
            {else}
                {assign var="thumb_image" value=""}
                {assign var="thumb_text" value="{$img_array.image_title_text}"}
            {/if}

            {assign var="img_values" value="class=\"img-responsive center-block\" src=\"{$smarty.const.DIR_WS_IMAGES}slider_images/{$img_array.image_large}\" alt=\"{$img_array.image_alt_text}\" title=\"{$img_array.image_title_text}\""}

            <div class="swiper-slide" data-thumb-image="{$thumb_image}" data-thumb-text="{$thumb_text}">

                {if $img_array.image_area_array|@sizeof > 0}
               
                    <img {$img_values} usemap="#map2_{$smarty.foreach.imgBig.index+1}" />
                    <map id="map2_{$smarty.foreach.imgBig.index+1}" name="map2_{$smarty.foreach.imgBig.index+1}">
                        {foreach item=area_array from=$img_array.image_area_array}
                            <area id="area2_{$area_array.image_area_id}" shape="{$area_array.image_area_shape}" coords="{$area_array.image_area_coords}" href="{$area_array.image_area_link_url}" alt="{$area_array.image_area_title}" title="{$area_array.image_area_title}" target="{$area_array.image_area_link_target}" />
                        {/foreach}
                    </map>
               
                {elseif $img_array.link_url}
               
                    <a href="{$img_array.link_url}" target="{$img_array.link_target}">
                        <img {$img_values} />
                    </a>
               
                {else}
               
                    <img {$img_values} />
               
                {/if}
               
            </div>

        {/foreach}

    </div>

    <div class="swiper-pagination"></div>
    <div class="js-teaser-slider-prev swiper-button-prev"></div>
    <div class="js-teaser-slider-next swiper-button-next"></div>
</div>
</div>

Und die folgende csss in den Ordner Honeygrid/usermod/css kopieren

enjoi

ED

 

Hi sirtet, eben gesehen, Du hattest auch noch eine Frage.

also bei den Produktbildern kannst Du den Flip Effekt nutzen (den bauen wir machmal ein) - bedingt auch den Cube. Das Problem beim Cube sind machmal Schatten, die entstehen, das ist aber Geschmacksache. Natürlich geht auch slide, da muss aber angepasst werden.

Falls Du mal flip versuchen willst, kopiere die Honeygrid/snippets/product_info/images/product_images.html, erzeuge eine product_images-USERMOD.html und ersetze den kompletten Inhalt (hier Version 3.2..) mit

Code:

{if $images|@count > 0}
    <div class="product-info-image {if 'SHOW_ZOOM'|gm_get_conf === 'true'}has-zoom{/if}" {if 'SHOW_ZOOM'|gm_get_conf === 'true'}data-gambio-widget="image_gallery magnifier" data-magnifier-target=".magnifier-target"{else}data-gambio-widget="image_gallery"{/if}>
        <div class="product-info-image-inside">
            {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_image_swiper" startWidget="true" swiperImages=$images itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperControls="#product_thumbnail_swiper, #product_thumbnail_swiper_mobile" swiperOptions=", \"effect\": \"flip\", \"autoplay\": null"}
        </div>
    </div>
{/if}

{if $thumbnails|@count > 1}
    <div class="product-info-thumbnails hidden-xs hidden-sm swiper-vertical">
        {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_thumbnail_swiper" startWidget="true" swiperImages=$thumbnails itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperTarget="#product_image_swiper" swiperOptions=", \"spaceBetween\": 10, \"loop\": false, \"direction\": \"vertical\", \"slidesPerView\": 4, \"autoplay\": null" additionalData="data-swiper-breakpoints=\"[]\""}
    </div>
    <div class="product-info-thumbnails-mobile col-xs-12 visible-xs-block visible-sm-block">
        {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_thumbnail_swiper_mobile" startWidget="true" swiperImages=$thumbnails itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperTarget="#product_image_swiper" swiperOptions=", \"spaceBetween\": 10, \"loop\": false, \"direction\": \"horizontal\", \"slidesPerView\": 4, \"autoplay\": null" additionalData="data-swiper-breakpoints=\"[]\""}
    </div>
{/if}

ED

 

huiiii - dankeschön @Ed - bin gespannt ob ich es schaffe lach

 

@Ed,

ich habe das mit dem Slider mal in meinem Testshop eingebaut. Leider wird der Slider dann doppelt angezeigt. Wo liegt mein Fehler?

Vielen Dank im Voraus.

 

Hi andreas, hast Du die css eingebaut

ED

 

@Ed,

ich habe es nun nochmals gemacht, diesmal hat es funktioniert.

Vielen Dank für dein Effekt für den Slider.