Hallo Florian,
habe gerade die Lupenfunktion in meinem Forum wieder in Gang bekommen.
Meine Idee ist es, auch in der Bildergalerie die Lupe einzubauen. Sie sollte allerdings ein- und ausschaltbar sein.
Wenn man in class="loupe" display:none !important; einfügt ist die Lupe ausgeschaltet.
Ein X im zweiten Script tut es auch, ist aber wohl nicht so korrekt (mit "display:block/none" geht es nicht).
Hast Du hier eine Lösung, währe echt super!


Hier das Script:

<style type="text/css">
.loupe {display:none !important;z-index:11;background-color:#ffffff;cursor:none;border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
.lupe {width:400px;}
</style>

<script type="text/javascript" src="http://home.arcor.de/wolf.andres/forum/lupe/jquery.loupe.min.js"></script>
<script type="text/javascript">$('.lupe').loupe(x);</script>

<br><br><br><br>
<img class="lupe" src="http://files.homepagemodules.de/b104774/pictures_u299_fa7987.jpg" />
<br><br><br><br>


Nachtrag:

Hier ist nochmal der Link, um das Vollbild abzurufen. Das Vollbild entspricht der maximalen Größe des Zoom's.
Aber wie bekommt man class=".lupe" in den Bilder-Link?

{{gallery_dl_link==true.start}}
<a href="{{gallery_dl_link}}" class="foptions" name="viewport" target="_blank"><small>Vollbild-Ansicht</small></a>
{{gallery_dl_link==true.end}}


Bis dann und besten Dank im Voraus
Wolfgang

Hallo Wolfgang,

evtl. kannst du mit den jQuery-Funktionen .css() (zum Setzen bestimmter Style-Eigenschaften) oder .hide() (zum Ausblenden von Elementen, Gegenstück show) etwas brauchbares zum Ein- und Ausblenden der Elemente basteln. Um nicht mit IF-Abfragen arbeiten zu müssen, würde sich auch .toggle() anbieten.

Aber ich schätze mal, dass dir vor allem .toggleClass() eine große Hilfe sein könnte, dadurch kannst du die Klasse .lupe immer wieder ein- und ausschalten, ohne extra Link oder Ausblenden per Spoiler.


Wenn du die Lupe auch bei Klick ausblenden lassen möchstest, braucht das DIV mit der Klasse .loupe einen Event-Handler, der die Lupe dann letztlich wieder ausblendet. Da die Lupe kein Kindelement des Bildes oder des DIVs darum ist, wird das Event auch nie am Bild selbst durchgereicht, deshalb der extra Handler auf der Lupe selbst, s. dazu auch .click().

Möglicherweise reicht also ein einfacher Handler wie folgender:

$( '.loupe' ).click(function(e){
	[…]
});
 

Ich hoffe, dass dir das bereits weiterhilft. Ansonsten müssen wir da nochmal genauer nachschauen, wird dann aber evtl. nochmal 'ne Weile brauchen.

Hallo Florian,
es gibt keinen direkten "Div-Container" für ". loupe" ,
nur zwei Scripte "<script type="text/javascript">$('.lupe').loupe();</script>" + "<script type="text/javascript" src="http://home.arcor.de/wolf.andres/forum/lupe/jquery.loupe.min.js"></script>" + css für .lupe + css für .loupe.

Ich kann z.B. die Größe der Lupe auch nur in der CSS mit "!important" verändern.
Keine Klick-Funktion will funktionieren, wenn die Lupe angezeigt wird.
Um die Lupe über einen Klick wieder auszuschalten, müsste einfach nur der Link nochmal ausgelöst werden.
Was fehlt hier, was passt nicht?

$( '.loupe' ).click(function(e){

href='javascript:clip(30010);.......';

//	oder    $('.loupe').hide();
//	oder    $('.lupe').hide();
//	oder    $('.foptions').toggle();

	
});

Hallo Wolfgang,

also das beste was ich bis jetzt habe, ist folgendes kleines Skript:

$( '.loupe' ).click(function(e){
    console.log('hide loupe');
 
    clip(30002);
    clip(30001);
    clip(30000);
    clip(30007);
    clip(30008);
    clip(30011);
    clip(30014);
 
    $('.loupe').hide();    
});
 

Ich habe jetzt nicht mehr bis ins letzte Detail analysiert, welche der clip()-Aufrufe wirklich benötigt werden, aber ich denke mal, du hast die nicht umsonst eingefügt gehabt.

Ich musste leider feststellen, dass $('.loupe').hide(); an sich funktioniert, aber solange die Maus über dem Bild ist wird die Lupe eben gleich wieder angezeigt. Es ist mir durch ein sehr schnelles Flackern aufgefallen, auch in der Entwicklerkonsole ändern sich CSS-Eigenschaften relativ schnell, die geänderten Werte sind in dieser Geschwindigkeit nahezu unerkennbar. Es müsste sich aber um die display-Eigenschaft handeln.


Das Umschalten der Buttons ist wahrscheinlich am einfachsten, wenn du alle immer wieder auf Standard zurücksetzt und den gerade aktiven dann entsprechen änderst/einfärbst.


Frohe Ostern

Florian

Hallo Florian,
funktioniert! Super! Musste das Script ganz am Ende unterbringen. Ist auch kein flackern zu bemerken.

Hier: http://www.hilfe-tricks-tipps.de/g11p149...rab.html#ziel_s

Hallo Wolfgang, freut mich!
Es flackert tatsächlich nur nicht, weil du ja durch die clip-Anweisungen ein anderes Bild einblendest, welches nicht mit der Lupenfunktion ausgestattet ist. Würdest du das nicht so machen, würde die Lupe per hide zwar ganz kurz verschwinden, da aber immer noch die Maus auf dem Bild ist auch sofort wieder erscheinen.

Ach ja, du kannst ggf. console.log(…) wieder rausschmeißen, das wird nur benötigt um zu sehen, ob die Funktion korrekt getriggert wurde. Ein Überbleibsel vom Flackern.

Zitat von florian-zier im Beitrag #4

---

Hallo Wolfgang,

also das beste was ich bis jetzt habe, ist folgendes kleines Skript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

$( '.loupe' ).click(function(e){
    console.log('hide loupe');
 
    clip(30002);
    clip(30001);
    clip(30000);
    clip(30007);
    clip(30008);
    clip(30011);
    clip(30014);
 
    $('.loupe').hide();    
 
***********************************
$(location).href('#viewport');
oder
window.location='#viewport';
oder
location.replace('#viewport');
***********************************
 
});
 

---

Wie genau meinst du das, willst du nochmals zu #viewport springen oder an eine andere Position?


Um den #viewport wieder zu setzen, klappt das mit deinem Vorschlag bereits:

window.location = '#viewport';
 

Für eine andere Position bräuchtest du nur einen entsprechenden Anker, auf den du genauso verweist.


P.S.: Die Hervorhebungen im Code mache ich nicht manuell, die macht mein Highlight-Plugin. So ähnlich wie die Hervorhebungen im PI-Editor, nur dass ich es schon vor dem PI-System eingebaut hatte.

Hallo Florian,
mal wieder besten Dank für die schnelle Antwort.
Ja, einfach zum vorhandenen Anker (#viewport).
Ich hatte es bereits ausprobiert und es hat so nicht funktioniert.
Aber, nach Deiner Antwort!
Die Zeile war an der verkehrten Stelle.
So funktioniert es, auch in den anderen Browsern!

$( '.loupe' ).click(function(e){
    console.log('hide loupe');
 
    clip(30002);
    clip(30001);
    clip(30000);
    clip(30007);
    clip(30008);
    clip(30011);
    clip(30014);
 
    window.location='#viewport';
 
    $('.loupe').hide();    
 
});
 

Beste Grüße
Wolfgang