Vraag & Antwoord

Webprogrammeren & scripting

[JS] Image resizer

13 antwoorden
  • Voor mijn forum gebruik ik de volgende image resizer: [code:1:36a860cf97]<script> window.onload = resizeimg; function resizeimg() { if (document.getElementsByTagName) { for (i=0; i<document.getElementsByTagName('img').length; i++) { im = document.getElementsByTagName('img')[i]; if (im.width > 500 && im.src != "http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif") { im.style.width = '500px' im.style.border = '1px dashed' eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=1000,height=700,scrollbars=1,resizable=1'); pop.focus();\")"); eval("im.onclick = pop" + String(i) + ";"); if (document.all) im.style.cursor = 'hand'; if (!document.all) im.style.cursor = 'pointer'; im.title = 'Klik op de afbeelding om hem op ware grootte te bekijken'; } } } } </script>[/code:1:36a860cf97] Werkt goed, behalve als men een afbeelding via imageshack of fotopocket oid heeft geüpload. Daar wordt namelijk automatisch een link naar imageschap/fotopocket omheen gegooid, waardoor er dus 2 vensters openen: 1 gewenste met de afbeelding op volledig formaat en 1 ongewenste met imageshack. Dat wil ik voorkomen. Ik dacht eraan om in plaats van de afbeelding zelf klikbaar te maken, er een zwarte balk bovenop te plakken (zodanig dat het 1 geheel lijkt met de afbeelding) waar men op moet klikken voor volledig formaat. Maar dat krijg ik helaas niet voor elkaar, waarschijnlijk gewoon omdat ik niet zo'n jaascripter ben. Ik snap bijvoorbeeld dat eval niet (wat moet er gechecked worden??) en hoe ik de onclick kan verplaatsen naar de zwarte balk. Kan iemand me op weg helpen?
  • Een onorthodoxe methode zou zijn om de link om de image uit te schakelen. [code:1:77e146bd0e] <script type="text/javascript"> window.onload = resizeimg; function resizeimg() { if (document.getElementsByTagName) { var img, imgs = document.getElementsByTagName('IMG'), i = imgs.length; while (i--) { img = imgs[i]; if (img.width > 500 && img.src != "http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif") { img.style.width = '500px'; img.style.border = '1px dashed'; img.onclick = function() { var pop = window.open(this.src, 'fullscale', 'width=1000,height=700,scrollbars=1,resizable=1'); pop.focus(); } img.style.cursor = 'pointer'; img.title = 'Klik op de afbeelding om hem op ware grootte te bekijken'; if (img.parentNode.nodeName == 'A') { img.parentNode.onclick = function() { return false; } } } } } } </script> [/code:1:77e146bd0e] Zoals je ziet, heb ik ook de eval() weggehaald. Deze is helemaal niet nodig en wordt eigenlijk ook gezien als een lelijke taalconstructie in de vorm zoals deze is gebruikt in jouw codevoorbeeld. Eval werd hier gebruikt om verschillende stringfragmenten op te tellen en deze vervolgens als javascriptcode uit te voeren.
  • Het werkt niet helemaal. Ik denk omdat de link niet vastzit aan de image, maar er omheen staat. De code die standaard wordt meegeleverd door bijvoorbeeld fotopocket (imageshack=idemdito): [code:1:d079bca06f][url=www.fotopocket.nl][img]www.urlvanhetplaatje.nl[/img][/url][/code:1:d079bca06f] Dit komt er als volgt uit te zien in de bron: [code:1:d079bca06f]<div class="postbody"><a href="http://www.fotopocket.nl" class="postlink" target="_blank"><img src="http://www.swordfactsbenelux.nl/header.jpg" alt="Afbeelding" /></a></div>[/code:1:d079bca06f] De img is dus genest in de a. Kan het dan ook op de manier zoals jij aangeeft, maar dan net ff anders (als je begrijpt wat ik bedoel)?
  • Hmm, vreemd. Mijn code gaat er juist vanuit dat de img genest is in een anchor (ik zet een onclick op de parentNode van de image). Kan je aangeven wat er niet werkt? Krijg je bijvoorbeeld foutmeldingen? Misschien even de nodeName naar hoofdletters omzetten? [code:1:8ba1e99e97] if (img.parentNode.nodeName.toUpperCase() == 'A') [/code:1:8ba1e99e97] Zet anders wat debuginfo in de functie om te kijken waar het mis gaat.
  • Geen foutmeldingen, gewoon geen resultaat (alsof er niets aan de code gewijzigd is zeg maar). Dat deed mij vanmorgen nog eens bedenken: in phpBB 3.x worden de templates (waarin ik dit heb staan; overall_header) gebufferd. De buffer geleegd en verdomd: het werkte gewoon. [url=www.swordfactsbenelux.nl/forums/viewtopic.php?f=20&t=400]Hier[/url] kun je het resultaat zien. Vanavond ga ik het nog ff in andere browsers bekijken (heb tot mijn spijt op het moment van typen alleen IE 6 ter beschikking) maar ik heb er vertrouwens in. De nodename naar hoofdletters omzetten was dus niet nodig. Bedankt! :D
  • Dammit. Ik werd er vandaag op gewezen dat dit niet helemaal werkt, helaas. Gewoon bij topicview wel, maar als je een antwoord geeft, dan zie je bij de oude berichten (onder het scherm, apart frame) dat het niet goed gaat. Ook als je op voorbeeld klikt bij het invoegen van een te groot plaatje, gaat het mis. In Firefox valt het nog mee, maar in IE (vooral 6) wordt het lelijk: Zie http://www.swordfactsbenelux.nl/forums/posting.php?mode=reply&f=20&t=400 Inloggen kan met username Test en wachtwoord test123 Weet iemand hoe dit kan? Bovenstaande javascript wordt netjes geladen (zie bron). Klopt ook, want dat staat in overall_header. Wat is er mis?
  • Vanzelfsprekend zit ik zelf niet stil. Ik denk inmiddels dat het met de editor.js te maken heeft, die wordt aangeroepen wordt in posting.php (bij een nieuw bericht dus). Daarin wordt ook een onload functie uitgevoerd, waardoor die van de resize mod overschreven wordt. Stukjes code: [code:1:73177a38a2] var baseHeight; onload_functions.push('initInsertions()'); [/code:1:73177a38a2] En iets verder: [code:1:73177a38a2] function initInsertions() { var doc; if (document.forms[form_name]) { doc = document; } else { doc = opener.document; } var textarea = doc.forms[form_name].elements[text_name]; if (is_ie && typeof(baseHeight) != 'number') { textarea.focus(); baseHeight = doc.selection.createRange().duplicate().boundingHeight; if (!document.forms[form_name]) { document.body.focus(); } } } [/code:1:73177a38a2] Daar heb ik dus de resizer in probeer te bouwen, maar dat gaat niet goed, of beter gezegd: het heeft 0,0 effect (ook na het rebuilden van de template). Zie voor het resultaat van de editor.js hier (edit: link weg gehaald door Ger ivm opgelost probleem) Nu ben ik niet zo'n scripting-expert, maar ik neem toch aan dat dit wel in te bouwen valt op de een of andere manier?
  • Kan je dan niet in plaats van [code:1:7996885573]window.onload = resizeimg;[/code:1:7996885573] Het volgende doen? [code:1:7996885573]onload_functions.push('resizeimg()');[/code:1:7996885573] De naamgeving doet namelijk vermoeden dat je hiermee meerdere functies kan toevoegen aan de onload. Maar geen garanties :) het is namelijk geen standaardfunctionaliteit.
  • Ja, daar had ik ook al mee proberen te spelen, evenals het toevoegen aan die editor.js door [code:1:c147249625]onload_functions.push('initInsertions()','resizeimg()');[/code:1:c147249625] en de resizer dan ook daarin zetten. Zonder succes. :( Maar is er niet een andere manier om die functie direct te callen, zonder de onload? Ik noem maar wat, bijvoorbeeld door een onmousover bij de body ofzo...
  • Woohooo!!!!! Ik heb 't! :D Zoals ik hierboven al opperde, ik heb een andere manier gezocht (en gevonden zoals je vast al doorhad) om de functie te callen. In plaats van een window.onload te gebruiken heb ik die daar weggehaald. Bij de body-tag heb ik gezet: [code:1:b6f7c12b32]<body onmouseover="resizeimg()" class="{S_CONTENT_DIRECTION}">[/code:1:b6f7c12b32] (die class stond er al). Nu werkt het! :D /me is zo happy, al flink wat tijd in gestoken!
  • Verdomd... in IE6 zit er nog steeds een probleem. :? Wéér alleen bij het antwoorden. Nu gaat het bekijken van het voorbeeld wel goed, maar de berichten in de topic_review niet. En het stomme is, daar worden ze wel geresized. De opmaak wordt echter wel verstoord. Beetje onduidelijk verhaal ben ik bang, maar [url=http://www.swordfactsbenelux.nl/forums/viewtopic.php?f=20&t=400]dit is een voorbeeldtopic[/url] en inloggen om te reageren kan met user [b:ddf891860e]Test[/b:ddf891860e] en pass [b:ddf891860e]test123[/b:ddf891860e]. De code die ik nu heb: [code:1:ddf891860e]<script type="text/javascript"> function resizeimg() { if (document.getElementsByTagName) { var img, imgs = document.getElementsByTagName('IMG'), i = imgs.length; while (i--) { img = imgs[i]; if (img.width > 500 && img.src != "http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif") { img.style.width = '500px'; img.style.border = '1px dashed'; img.onclick = function() { var pop = window.open(this.src, 'fullscale', 'width=1000,height=700,scrollbars=1,resizable=1'); pop.focus(); } img.style.cursor = 'pointer'; img.title = 'Klik op de afbeelding om hem op ware grootte te bekijken'; if (img.parentNode.nodeName == 'A') { img.parentNode.onclick = function() { return false; } } } } } } </script> [/code:1:ddf891860e] en aanroepen in de body: [code:1:ddf891860e]<body onmouseover="resizeimg()" class="ltr">[/code:1:ddf891860e]
  • Om het gebeuren wat generieker te maken voor andere websites, zou ik om de site_logo uit te sluiten van de resizer graag gebruik maken van een variabele die gedefinieerd staat. Die wordt netjes omgezet in [code:1:4be100433a]./styles/sfb/imageset/site_logo.gif[/code:1:4be100433a] maar vervolgens wordt het wél geresized. :? Ook als ik die ./ aan het begin weghaal, pikt-ie het nog niet. Wat is er mis? Kens JS geen relatieve URL's ofzo?
  • Als je je code wat generieker wil maken, dan zou ik niet uitgaan van een naam van een image, maar van een 'gebied' in je HTML waar je de resizer op wil loslaten. Ik heb even in het forum gekeken en het lijkt erop dat het gebied waar jij de resizer wilt toepassen altijd de id 'center' heeft (tip: Firebug is een handige manier om dit te onderzoeken). Ik zou de functie dan ook aanpassen naar: [code:1:87dcbd5731] <script type="text/javascript"> // voorbeeldaanroep resizeimg(document.getElementById('center')); function resizeimg(el) { if (document.getElementsByTagName) { var img, imgs = el.getElementsByTagName('IMG'), i = imgs.length; while (i--) { img = imgs[i]; if (img.width > 500) { img.style.width = '500px'; img.style.border = '1px dashed'; img.onclick = function() { var pop = window.open(this.src, 'fullscale', 'width=1000,height=700,scrollbars=1,resizable=1'); pop.focus(); } img.style.cursor = 'pointer'; img.title = 'Klik op de afbeelding om hem op ware grootte te bekijken'; if (img.parentNode.nodeName == 'A') { img.parentNode.onclick = function() { return false; } } } } } } </script> [/code:1:87dcbd5731] Overigens is het op jouw manier ook mogelijk. Alleen moet je dan niet op de volledige string matchen, maar zoeken naar een deel van een string. En dat kan met [url=http://www.devguru.com/technologies/javascript/10807.asp]indexOf[/url]. Voorbeeld: [code:1:87dcbd5731] <script type="text/javascript"> var s = 'http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif'; if (s.indexOf('/styles/sfb/imageset/site_logo.gif') != -1) { alert('bingo'); } else { alert('nope'); } </script> [/code:1:87dcbd5731]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.