Autor |
Nachricht |
Morpheus1968
Threadersteller
Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht:
|
Verfasst Mi 14.03.2012 11:55
Titel Fancybox und Imagemap |
|
|
ich versuche seit tagen Fancybox und Imagemap zu vereinen .. es soll .. eine Europakarte .. mit Mouse over und Mouse out ... gestaltet werden ...
Das habe ich bereits .............
Dann sollen einzelnen Länder mit click ... und fancybox angezeigt werden ....
bei einer andere Seite habe ich es mit Lightbox .. sauber hinbekommen ..
aber bei diesem Projekt muss ich mit fancybox arbeiten .. aber es klappt nicht ..
Kann evtl. jemand Helfen ??
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 14.03.2012 12:08
Titel
|
|
|
Nunja, du musst halt erstmal den Click-Handler setzen und danach Fancybox aufrufen:
Code: |
$('area').on("click",function(){
$.fancybox({...Parameter...});
});
|
|
|
|
|
|
Anzeige
|
|
|
Morpheus1968
Threadersteller
Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht:
|
Verfasst Mi 14.03.2012 12:12
Titel
|
|
|
Code: | <area shape="poly" coords="454,275,475,273,476,265,426,271,419,286,436,305,459,322,466,306,468,300,453,290" alt="" title="Greece" onmouseover="imgchg('eumap','../css/images/map/bg-map-greece.jpg')" onmouseout="imgchg('eumap','../css/images/map/bg-map.jpg')" href="#" onclick=(href="../css/images/map/greece.jpg", rel="pagidas")/>
|
habe ich gesetzt
|
|
|
|
|
Morpheus1968
Threadersteller
Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht:
|
Verfasst Mi 14.03.2012 12:17
Titel
|
|
|
map
hier klappt es einwandfrei da habe ich mit Lightbox gearbeitet
nur mit fancybox bekomme ich es nicht hin
Zuletzt bearbeitet von Morpheus1968 am Mi 14.03.2012 12:23, insgesamt 1-mal bearbeitet
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 14.03.2012 12:52
Titel
|
|
|
Fancybox ist ein jQuery Plugin, habe dir oben beschrieben, wie du herangehen musst.
Erst den Klick-Handler auf dem Area-Element setzen, und dann Fancybox aufrufen. Innerhalb des Fancybox-Aufrufs musst du natürlich irgendwas angeben, was in die Fancybox geladen werden soll, entweder mit einer angegebenen Url zur Seite, die geladen werden soll, oder direkt ein als Content
Code: |
$('area').on("click",function(){
var thisUrl = $(this).attr("href");
$.fancybox({href:thisUrl});
});
|
Dir ist aber schon bewusst, das Fancybox ein jQuery-Plugin ist, dementsprechend auch jQuery eingebunden werden muss.
Lightbox ist standalone und kann ohne irgendeine Bibliothek eingesetzt werden.
Zuletzt bearbeitet von immerIch am Mi 14.03.2012 12:57, insgesamt 3-mal bearbeitet
|
|
|
|
|
Morpheus1968
Threadersteller
Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht:
|
Verfasst Mi 14.03.2012 13:00
Titel
|
|
|
schau mal auf die seite
testseite ....imagemap + fancybox
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css" media="screen" />
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 14.03.2012 13:06
Titel
|
|
|
Überprüf bitte erstmal dein Markup. In deinem map-Tag sind anchor-tags samt Bilder drin, die müssen da raus.
Darüber hinaus frage ich mich, warum du hier mit onmouseover, onmouseout, onclick arbeitest, wenn du eh jQuery drin hast. Das vereinfacht doch einiges.
Code: | $('area').on("mouseover",function(){
});
$('area').on("mouseout",function(){
});
$('area').on("click",function(){
}); |
Zuletzt bearbeitet von immerIch am Mi 14.03.2012 13:12, insgesamt 4-mal bearbeitet
|
|
|
|
|
Morpheus1968
Threadersteller
Dabei seit: 04.03.2010
Ort: Paderborn
Alter: 56
Geschlecht:
|
Verfasst Mi 14.03.2012 13:49
Titel
|
|
|
na eigentlich sollte nun alles passen
aber geht immer noch nicht
|
|
|
|
|
|
|
|
Ähnliche Themen |
Tabslideout.js vs. Fancybox
Fancybox > genau so...
FancyBox und Flash
jQuery Fancybox per Js aufrufen?
jquery easySlider + Fancybox
JW Image Rotator & Fancybox
|
|