ANLEITUNG: Image Slider mit Image Map, verschiedene Effekte & mouseover hover

[zeolite]

Lösung für: Image Slider mit Image Map, verschiedene Effekte & mouseover hover

Lösungserklärung für uns Laien: Man benötigt das wenn man zB auf der Startseite einen Slider haben möchte, diesen mit mehreren Links pro Bild versehen möchte (zu den abgebildeten Produkten, in verschiedene Kategorien etc.) und der Slider nicht weiterläuft, wenn man mit der Maus über dem Bild ist und etwas auswählen möchte.

Basis: jQuery Cycle Plugin

Dank: Für mindestens 99,99% der Arbeit geht an - noRiddle

Schwierigkeitsgrad Einbau: sehr leicht

1.) http://malsup.github.com/jquery.cycle.all.js als Datei anlegen und in "/templates/<template-name>/javascript/jquery.cycle.all.js" speichern.

2.) In der "/templates/<template-name>/javascript/general.js.php" folgendes einfügen:

Code: PHP  [Auswählen]

<?php if (basename($PHP_SELF) == FILENAME_DEFAULT && !isset($_GET['cPath']) && !isset($_GET['manufacturers_id'])) { ?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
  $(document).ready(function() {
    var mp = $('#main-pics');
    var pics = $('#pics');

    pics.cycle({fx:'fade',timeout:3000,speedIn:1500,speedOut:1500});
    mp.hover(function() {
      pics.cycle('pause', true);
    },
      function() {
        pics.cycle('resume');
      }
    );
  });
/* ]]> */
</script>
<?php } ?>

Im ersten Teil nach "pics.cycle" kann der gewünschte Effekt ausgewählt werden. Die jeweiligen Effekte kann man sich hier aussuchen: http://www.malsup.com/jquery/cycle/

3.) In der "/templates/<template-name>/stylesheet.css" folgendes hinzufügen:

Code: CSS  [Auswählen]

/* jquery cycle plugin*/
.pics {
  height: 500px;
  width: 755px;
  padding: 0;
  margin: 0;
}
.pics img {
  padding: 0px;
  border: 0px solid #ccc;
  background-color: #eee;
  width: 755px;
  height: 500px;
  top: 0;
  left: 0;
}
.slider {
  margin-top: -40px;
  margin-left: -13px;
}

.pics & .pics img sind Einstellungen für den Slider - Bildgröße, evtl. Rahmen, Hintergrundfarbe etc. Gewünschte Bildgröße bitte hier einstellen.
.slider habe ich für die Positionierung benötigt, anders hat es bei mir nicht funktioniert

4.) Einbau des Sliders z.B. in der "/templates/<template-name>/module/main_content.html":

Code: PHP  [Auswählen]

<div class="slider">
  <div id="main-pics">
    <div id="pics">
        <img src="{$tpl_path} [b][i]Ordner/Name zum ersten Bild[/i][/b] " width="755" height="500" usemap="#Map1" border="0" />
        <img src="{$tpl_path} [i][b]Ordner/Name zum zweiten Bild[/b][/i] " width="755" height="500" usemap="#Map2" border="0" />
    </div>
    <map name="Map2">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
    </map>
    <map name="Map1">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
      <area shape="rect" coords="gewünschte Koordinaten" href="was auch immer">
    </map>
  </div>
</div>

Um Image Maps zu erstellen, einfach mal in der Suchmaschine des Vertrauens nach "Image Map" suchen.

Ich hoffe ich habe nichts vergessen, damit sollte es tadellos laufen!

Viel Spass damit!

P.S. Dank an noRiddle für die Unterstützung/Lösung

[EDIT Tomcraft 19.09.2015: Anleitung überarbeitet.]
[EDIT Tomcraft 19.09.2015: Anleitung in Beitrag 1 verlinkt.]

[noRiddle (revilonetz)]

Ich wäre noch dafür, daß man die jQuery-Initialisierung $(document).ready usw. ausgliedert in eine Datei, z.B. namens activate-slider.js und über die general.js.php conditional nur für die Startseite einbettet.
Dann kann man auch auf {literal} verzichten.

Zu image map:
Es gibt einige die diese Art der Multiverlinkung von Bildern nicht mögen und als veraltet ansehen.
Es ist jedoch nach wie vor eine hervorragende Möglickeit auch ungewöhnliche (nicht rectangular) shapes zu verwirklichen
(Stichwort: poly(gon)).

Code: XML  [Auswählen]

<area shape="default|rect|circle|poly">

Als plugin sollte man ein Tool benutzen welches nicht HTML-Elemente per Javascript generiert die über die Bilder des Sliders gelegt werden, beispielsweise um ein Bild als ganzes zu verlinken.
Der Nivo-Slider z.B. tut das und wäre deshalb ungeeignet für image maps.

Das hier von zeolite als Lösung vorgestellte Cycle-Plugin eignet sich gut und könnte mit ein paar wenigen DB-Erweiterungen auch
in Hetfields imageslider eingebaut werden,
womit man dann ein Admin-Interface hätte wo man auch die areas editieren könnte.
Das wär' doch mal was, wer hat Lust ?

Gruß,
noRiddle

[Gradler]

Das wär' doch mal was, wer hat Lust ?

Lese das heute schon mehrmals von Dir. Hast Du zuviele Glückskekse bekommen?

Aber, Spaß beisetie. Generell ja, Zeit auch, jedoch leider keine fundierten Kenntnisse.

Gerd

[noRiddle (revilonetz)]

Glückskekse ?, nix verstehen.

Ich habe das mal mit dem Nivo-Slider gemacht, jetzt habe ich keine Lust mehr .
Da muß sich ein anderer finden...

Gruß,
noRiddle

[zeolite]

Hallo,

ich wollte das selbe wieder in der aktuellen Shopversion - 1.06 rev 4642 SP2 - einbauen, allerdings leider mit wenig Erfolg. Es werden die Slider Bilder untereinander angezeigt.

In der Konsole wird der Fehler TypeError: pics.cycle is not a function ausgeworfen.

Wenn ich die main_content wie folgt erweitere, ist der Fehler weg, Ergebnis aber noch das Selbe

Code: PHP  [Auswählen]

{literal}<script type="text/javascript" src="../javascript/jquery.cycle.all.js">{/literal}

Ist der Slider in der aktuellen Version gar nicht mehr zu verwenden?

Gruß,
zeolite

[zeolite]

/templates/xtc5/javascript/general.js.php

folgendes einfügen:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.cycle.all.js" type="text/javascript"></script>

habe ich oben in der Anleitung vergessen!

[Tomcraft]

Ich wäre noch dafür, daß man die jQuery-Initialisierung $(document).ready usw. ausgliedert in eine Datei, z.B. namens activate-slider.js und über die general.js.php conditional nur für die Startseite einbettet.
Dann kann man auch auf {literal} verzichten.
[...]

Ich denke, dass es reicht jQuery-Initialisierung mit in die "general.js.php" einzubinden. Hierfür braucht es keine extra Datei.

[...]
/templates/xtc5/javascript/general.js.php

folgendes einfügen:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.cycle.all.js" type="text/javascript"></script>

habe ich oben in der Anleitung vergessen!

Beides habe ich oben in der Anleitung umgesetzt.

Grüße

Torsten

[noRiddle (revilonetz)]

Ich wäre noch dafür, daß man die jQuery-Initialisierung $(document).ready usw. ausgliedert in eine Datei, z.B. namens activate-slider.js und über die general.js.php conditional nur für die Startseite einbettet.
Dann kann man auch auf {literal} verzichten.
[...]

Ich denke, dass es reicht jQuery-Initialisierung mit in die "general.js.php" einzubinden. Hierfür braucht es keine extra Datei.
...

Korrekt, halt nur conditional nur für die Startseite, insofern der Slider nur auf der Startseite angezeigt wird.

Gruß,
noRiddle

[Tomcraft]

Genau so habe ich es in der Anleitung umgesetzt.

Grüße

Torsten