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 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 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

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');
***********************************
 
});
 

---

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