MeleaMedlem sedan juli 20032 667 inlägg
Tjenixen!
Nu ska jag banne mig lära mig javascript, så jag behöver allting förklarat för mig, steg för steg. :p
Det är så att jag har ett bildarkiv med thumbnails, och man ska kunna klicka på dessa bilder för att få upp orginalstorleken i ett nytt fönster, som är anpassat till bildens storlek.
Har börjat lite smått
<script type="text/javascript">
function imagePopup(lnk) {
popupWindow = window.open("", "", "scrollbars=no, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, width=700, height=500");
with(popupWindow.document) {
open();
write("<img src=\""+lnk+"\" style=\"border: 0;\" alt=\"\" />");
close();
}
}
</script>
<a href="pic.jpg" onclick="imagePopup(this.href); return false;">
<img src="pic.jpg" style="border: 0;" alt="" />
</a>
Hur gör jag nu om jag vill ändra storleken på fönstret, så att det blir bildens bredd/höjd?
Tack! :)
Peter SMedlem sedan dec. 20025 484 inlägg
Eftersom du vill ändra fönstrets storlek kan window.resizeTo()användas:
write("<body onload=\"window.resizeTo(document.images[0].width,document.images[0].height)\">");
Det första argumentet anger fönstrets bredd och det andra argumentet dess höjd. Med document.images[0] hämtar vi en referens till dokumentets första bildobjekt (det skriver ut på raden under denna). Bredd och höjd får vi med .width respektive .height.
Nu, på dessa värden är det inte omöjligt att du får addera något tal för att få det som du vill. Sedan har ju de olika webbläsarna benägenheten att rendera saker och ting annorlunda ändå :)
Om fönstrets dimensioner går att ändra på användarnivå kanske du också vill använda body.onresize.
Jag kan passa på att tipsa om Jojoxx popupskript. De tar hänsyn till både det ena och det andra. Vill du ha dem förklarade är det bara att posta något här.
MeleaMedlem sedan juli 20032 667 inlägg
Tack Peter! :)
Jag tittade på Jojoxx popupscript och kom fram till att detta passar mitt ändamål bäst
<script type="text/javascript">
/* The code contained in this file is copyrighted by [url]www.jojoxx.net[/url]
The file may be used for none commercial applications and distributed
as long as these lines remain intact. The file or part of it may not
be sold or included in any other commercial application without
agreement from the author. If you have questions or comments, contact
the author at [url]http://www.jojoxx.net[/url]
© Copyright - [url]www.jojoxx.net[/url] - 2004 */
function imgPopup5(url) {
var loader=new Image();
var top=parseInt(screen.height/2-50); var left=parseInt(screen.width/2-50);
var tempwin=window.open("","","scrollbars=no,resizable=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width=100,height=100,top="+top+",left="+left);
with(tempwin.document) {
open();
write("<html><head><title>Bildvisare</title></head><body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;background-color:black;color:white;\">");
write("Vänta medans bilden laddar");
write("</body></html>");
close();
}
loader.onload=function() {
var top=parseInt(screen.height/2-this.height/2);
var left=parseInt(screen.width/2-this.width/2);
tempwin.close();
MyWin = window.open("","","scrollbars=no,resizable=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width="+this.width+",height="+this.height+",top="+top+",left="+left);
with(MyWin.document) {
open();
write("<html><head><title>Bildvisare</title></head><body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">");
write("<img id='myimg' src=\""+url+"\">");
write("</body></html>");
close();
}
}
loader.src=url;
}
</script>
<a href="pic.jpg" onclick="imgPopup5(this.href); return false;">
<img src="pic.jpg" style="border: 0;" alt="" />
</a>
Det känns som jag förstår vad koden gör, bara det att jag måste öva en jäkla massa för att lära mig de olika syntax:erna utantill.
Det verkar dock som att den ovanstående koden vill att man måste acceptera popups för just den sidan, vilket inte något av de andra scripten Jojoxx har gjort gör.
Vad är det som skiljer detta från de andra?
Har stirrat mig blind nu, men jag ser ingen markant skillnad, förutom att sidan laddas med "loader". Är det det som strular till att?
Peter SMedlem sedan dec. 20025 484 inlägg
Problemet verkar ligga i att popupen genereras genom bildens onloadattribut (vilket kan jämföras med t.ex. window.onload i vilken popups också blockeras). Det lustiga med koden är att popupen bara blockeras varannan gång för mig i Firefox.
Du kanske får ta en annan av Johans varianter - en utan förladdningsfönster. :)
MeleaMedlem sedan juli 20032 667 inlägg
Använder en annan variant nu, men det vore toppen om man öppnade ett fönster, som anpassade sig till bildens storlek, men ändå var ett dokument som jag själv har döpt och kan ändra i.
Typ som WebTor har på http://www.tor.nu/
Några förslag? :)
Peter SMedlem sedan dec. 20025 484 inlägg
Beroende på hur du visar dina bilder kan det göras på några olika sätt.
// huvudfönstret med tumnaglarna
// php har väl några trevliga funktioner för att ta reda på bilders dimensioner?
<a href="image.php?img=[b]bildnamn[/b]&width=[b]bredd[/b]&height=[b]height[/b]" onclick="return openWin(this.href)">
function openWin(url){
window.open(url, "imgPopup", "height=100,width=100");
return false;
}
// i image.php använder du sedan querystring-variablerna så här
// nb. att sätta GET-värdena direkt i openWin() går ju också
<head>
<script type="text/javascript">
window.resizeTo($_GET['width'], $_GET['height']);
</script>
</head>
Du kan som sagt behöva addera något mysigt tal till GET-värdena. :)
MeleaMedlem sedan juli 20032 667 inlägg
Peter S skrev:
Beroende på hur du visar dina bilder kan det göras på några olika sätt.
// huvudfönstret med tumnaglarna
// php har väl några trevliga funktioner för att ta reda på bilders dimensioner?
<a href="image.php?img=[b]bildnamn[/b]&width=[b]bredd[/b]&height=[b]height[/b]" onclick="return openWin(this.href)">
function openWin(url){
window.open(url, "imgPopup", "height=100,width=100");
return false;
}
// i image.php använder du sedan querystring-variablerna så här
// nb. att sätta GET-värdena direkt i openWin() går ju också
<head>
<script type="text/javascript">
window.resizeTo($_GET['width'], $_GET['height']);
</script>
</head>
Du kan som sagt behöva addera något mysigt tal till GET-värdena. :)
Tack Peter! :)
Jo, i php kan man skriva getimagesize() för att ta fram storleken och lite annat på bilden, så det fixar sig nog.
En annan fråga, som jag lika gärna kan ställa här istället för att skapa en ny tråd.
Danny tipsade mig här om hur det skulle kunna se ut på sidan.
Saken är ju den att varje gång jag väljer en ny bild i vänsterkanten så laddas sidan om. Detta skulle jag kanske kunna lösa genom att lägga det i en frame eller dyl, men jag tycker inte det är en snygg lösning. :)
Så, kan jag lösa det med javascript på något vis? Att varje gång jag markerar en bild i vänsterkanten så uppdateras bildens src="" värden automatiskt i mitten?
Tack!
Peter SMedlem sedan dec. 20025 484 inlägg
Ligger bilderna i vänsterkanten och mittenbilden i samma dokument? Då
<img src="foo.jpg" onclick="displayImg(this.src, '[b]name[/b]-pa-mittenbild')" style="cursor:pointer" />
function displayImg(u, n){
document.images[n].src = u;
}
:)
MeleaMedlem sedan juli 20032 667 inlägg
Vill inte riktigt funka, bilderna i mitten hämtas genom en php-fil för att skapa thumbnails.
<script type="text/javascript">
function displayImg(u, n){
document.images[n].src = u;
}
</script>
...
<?
...
echo '
<ul>
<li>
<img src="thumb.php?picture=images/photo/1.jpg&size=90" onclick="displayImg(this.href, \'m_pic\')" style="border: 3px solid #fff; cursor: pointer;" alt="" />
</li>
<li>
<img src="thumb.php?picture=images/photo/2.jpg&size=90" onclick="displayImg(this.href, \'m_pic\')" style="border: 3px solid #fff; cursor: pointer;" alt="" />
</li>
</ul>
';
...
?>
...
<img src="thumb.php?images/photo/1.jpg&size=120" style="border: 3px solid #fff;" name="m_pic" alt="" />
Peter SMedlem sedan dec. 20025 484 inlägg
Skippa escape:ningen av apostroferna i funktionsanropet. :)
MeleaMedlem sedan juli 20032 667 inlägg
Ah, använder dem för att de står i en echo. :)
Redigerar inlägget ovan.
Peter SMedlem sedan dec. 20025 484 inlägg
Sorry, hjärnsläpp! Ersätt this.href med this.src :)
MeleaMedlem sedan juli 20032 667 inlägg
Det borde jag har listat ut själv. :OO
Hm, nu tar den ju med rubbet som står i src="", även size=90, vilket gör att bilden till vänster blir 90 pixlar bred. Måste jag lösa det med något reguljärt uttryck för att endast ta med 'images/photo/1.jpg'?
Peter SMedlem sedan dec. 20025 484 inlägg
this.src.match(/^.+?(?:gif|jpg|png)/)
:)
MeleaMedlem sedan juli 20032 667 inlägg
Du är en klippa Peter! :)
Men nu får jag inte riktigt koll på hur jag ska bygga upp det, antagligen är det bara huvet som inte riktigt hänger med såhär på fredagskvällen.
Hur hade du byggt upp det?
Om vi säger att jag skulle vilja ha size=230 på högersidan, och size=90 på vänstersidan, hur gör jag då? :OO :)
/red Hm, detta håller ju inte riktigt. :r
Eftersom adressen inte ändras i html-koden ändras inte heller länken till popupen som ska visa bilden i sin fulla storlek.
Sorry Peter, men det är faktiskt jag som har fått hjärnsläpp!
Hur hade du löst det?
Peter SMedlem sedan dec. 20025 484 inlägg
En möjlighet är att behålla this.src i funktionsanropet och sedan:
function displayImg(u, n, s){
document.images[n].src = u.match(/^.+?(?:gif|jpg|png)/) + "&size=230";
}
displayImg(this.href, \'m_pic\', 230);
:)
MeleaMedlem sedan juli 20032 667 inlägg
Menar du inte såhär?
function displayImg(u, n, s){
document.images[n].src = u.match(/^.+?(?:gif|jpg|png)/) + "&size=" + s;
}
displayImg(this.src, \'m_pic\', 230)
Men det funkar inte riktigt. :)
Peter SMedlem sedan dec. 20025 484 inlägg
Hm, jag hann inte med redigeringen. Jag tror på idén att endast ha en variant av tumnaglar på sidan (antingen till vänster eller centralt). Funktionaliteten skulle jag sedan hämta från inlägg #6.
Det blir nog för mycket pillande med JavaScript för att det skall vara värt mödan annars. :)
MeleaMedlem sedan juli 20032 667 inlägg
Okej, ett sådant svar jag hade hoppats på faktiskt. :)
Tack så väldigt mycket för hjälpen Peter!
Peter SMedlem sedan dec. 20025 484 inlägg
Skulle du lista ut något fräckt alternativ som ingen tänkt på tidigare, är det ju bara att återkomma :)
