| Autor |
Nachricht |
grafagoggel
Threadersteller
Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht: 
|
Verfasst Mi 14.07.2010 20:56
Titel Fancybox und jQuery Draggable |
  |
|
Hallo liebe Mediengestalter,
ich schlage mich nun seit ein paar Tagen mit einem Problem herum. Und zwar habe ich mir eine jQuery Gallerie gemacht, die unter anderem die Funktion hat, die Bilder per jQuery UI Draggable herum zu schieben. Nun möchte ich außerdem die jQuery Fancybox einbinden, die bei einem klick auf ein Bild geöffnet werden soll.
Das Problem hierbei ist, dass die Fancybox sich auch dann öffnet, wenn man dass Bild "nur" herumgeschoben hat. Was ja auch vollkommen logisch ist.
Nun habe ich ein bisschen gegoogelt, und habe herausgefunden, dass man mit folgendem Code checken kann ob sich die Position des Bildes verändert hat:
| Code: | jQuery(this).draggable();
jQuery(this).bind("mousedown", function(e){
mouseDownPos = { x:e.pageX, y:e.pageY };
});
jQuery(this).bind("mouseup", function(e){
if(mouseDownPos.x == e.pageX && mouseDownPos.y == e.pageY) {
// Code wenn sich die Position nicht verändert hat
}
}); |
Nun suche ich nach einer Möglichkeit die Fancybox Funktion, welche ja schon gestartet wurde, bei geänderter Bildposition sofort zu unterbrechen oder ganz zu unterbinden.
Hat da einer eine Idee?
Wäre wirklich dankbar.
Da das ganze über Wordpress auf einem localhost lebt, kann ich es euch nicht vorführen.
MfG
|
|
| |
   |
 |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 15.07.2010 09:01
Titel
|
|
|
Hi Grafagoggle,
als wenn man am Beispiel des vorherigen Threads eine
FancyBox den Items dranklebt, reagieren die ganz normal
(also Fancybox öffnet sich nur onclick, Drag reagiert nur
auf mouseDown/Up). Hier ein Beispiel:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animate drag fancy</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
}
.flickrimg {
position:absolute;
display:block;
visibility:hidden;
width:200px;
height:150px;
cursor:pointer;
border:0;
}
-->
</style>
<link href="fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.flickrimg').each(function(index,element){
// zufallszahl
var getRandom = function(maxValue,minValue){
var rnd = minValue + maxValue*(Math.random());
return rnd;
}
// Höhe/Breite
var maxH = $(element).height();
var maxW = $(element).width();
var minH = $(element).height()*0.6;
var minW = $(element).width()*0.6;
var imgW = getRandom(maxW,minW);
var imgH = imgW*(maxH/maxW);
// Top/Left Position
var maxL = Math.round($(window).width()*0.6)-imgW;
var maxT = $(window).height()-imgH;
var minL = Math.round($(window).width()*0.2); // Whatever
var minT = 0; // Auch whatever
var imgT = getRandom(maxT,minT);
var imgL = getRandom(maxL,minL);
// weg aus dem viewport + sichtbar machen
$(element).css({
'top': -imgH,
'left': -imgW,
'visibility': 'visible'
});
// Animieren
$(element).animate({
top: imgT,
left: imgL,
height: imgH,
width: imgW
}, 1000);
// Dragablen
$(element).draggable();
// FancyBox anhängen wenn ahref drumrum
$(element).parent('a').fancybox();
});
});
</script>
</head>
<body>
<a href="img1_big.jpg"><img src="img1.jpg" alt="" class="flickrimg" style="width:400px;height:200px" /></a>
<a href="img2_big.jpg"><img src="img2.jpg" alt="" class="flickrimg" style="width:350px;height:500px" /></a>
<a href="img3_big.jpg"><img src="img3.jpg" alt="" class="flickrimg" style="width:200px;height:100px" /></a>
<a href="img4_big.jpg"><img src="img4.jpg" alt="" class="flickrimg" style="width:400px;height:200px" /></a>
<a href="img5_big.jpg"><img src="img5.jpg" alt="" class="flickrimg" style="width:100px;height:50px" /></a>
</body>
</html>
|
Grüße
zweitaccount
|
|
| |
|
|
|
Anzeige
|
|
|
grafagoggel
Threadersteller
Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht:
|
Verfasst Do 15.07.2010 11:36
Titel
|
|
|
heyo  Danke das hab ich auch schon versucht.
Jedoch scheint dass bei mir nicht zu funktionieren 
edit:// Wenn ich es jedoch so
| Code: | jQuery(this).click(function() {
jQuery(this).fancybox();
}); |
mache funktioniert es bis ich einmal draufgeklickt habe.
Grüße
Zuletzt bearbeitet von grafagoggel am Do 15.07.2010 11:39, insgesamt 1-mal bearbeitet
|
|
| |
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 15.07.2010 12:01
Titel
|
|
|
Im Prinzip ist deine Aufgabenstellung kein Problem! Ich würde überhaupt nicht mit Click arbeiten, sondern nur mit Mousedown und Mouseup. Und zwar würde ich die Mouseposition beim Down speichern und mit der beim Up vergleichen, ist die identisch dann öffnet sich die Fancybox und ansonsten nicht.
Gruß Daniel
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 15.07.2010 13:09
Titel
|
|
|
Hmm, der click-event bezieht sich ja auf das a-href, die drag-events
und das animationszeugs aber auf das img selbst.
Beispiel (FreeHosting-Werbe-Provider kann sein dass du reloaden musst):
http://zweitaccount.zw.ohost.de/jquery-dragable/
Kann es sein das du hergehst und die a hrefs animierst und
diese dann auch dragable machst?
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 15.07.2010 13:11
Titel
|
|
|
| Code: | jQuery(this)
.draggable({
stop : function() {
jQuery.fancybox.cancel();
}
})
.parent('a')
.fancybox();
|
Zuletzt bearbeitet von sahnemuh am Do 15.07.2010 13:19, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery: Multiple draggable, ein droppable
jquery easySlider + Fancybox
jquery - fancybox und easySlider
jQuery Fancybox per Js aufrufen?
jQuery Fancybox - Abstand zwischen Thumbnails
Draggable - Fenster auf- & zuklappen
|
|
Willkommen auf dem Portal für Mediengestalter
