Resize mod

[Tazmanian]

Heeft er al iemand een goede resize mod gevonden?
Gebruik er nu eentje maar deze werkt nog niet naar behoren (Easy Resize Posted Images 1.1.1)

Deze mod werkt wanneer je een topic bekijkt. Maar heb er ook eentje nodig voor de printing page, de preview message en het scherm dat je krijg bij het antwoorden op een bericht.
Ik gebruik de style Fisubice2.

[Ger]

Ik heb hetvolgende Javascript gebruikt:

Spoiler: bekijk

OPEN

Code: Selecteer alles

/styles/fisubice2/templates/overall_header.html

FIND

Code: Selecteer alles

</head>

BEFORE, ADD

Code: Selecteer alles

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

SAVE/CLOSE ALL FILES

2 aandachtspunten:
1. De breedte heb ik op 500 px gezet, hiermee kun je spelen al naar gelang je verdere stijl, kijk wat je prettig vind
2. Het plaatje van je header (site_logo.gif) moet natuurlijk niet geresized worden. Daarom heb ik die uitgezonderd. Eventueel dus vervangen door jouw logo.

Demo (link werkt nog enkele weken, daarna ga ik de database overzetten naar dat forum).


Edit: Overigens had ik dit gebaseerd op een andere mod, van een Egyptenaar geloof ik. Best kans dat dat dezelfde is waar jij naar verwijst, maar dat kan ik nu ff niet zo gauw opzoeken. Enniewee: die vond ik zelf ook niet prettig werken, daarom gecustomized naar bovenstaande.

[Tazmanian]

Ja, de mod die ik gebruikte was ook van die egyptenaar.

Maar krijg hem toch niet volledig werken.
De code staat nu in mijn overall_header.

De images worden perfect verkleint als ik het bericht gewoon bekijk.
Maar wanneer ik een voorbeeld wil bekijken van mijn bericht worden de images niet geresized. Ook niet wanneer ik reply op een topic waar grote afbeeldingen in zitten. Dan krijg ik onderaan een schuifbalk en wordt de pagina uitgerekt.

Je kan dit testen op dit topic
http://kartgrid.be/phpbb3temp/viewtopic.php?f=14&t=4300

Username: Test
Paswoord: Test123

[Ger]

Hmm... nu je het zegt, inderdaad. Was me nog niet opgevallen.
Ik snap het ook ff niet eigenlijk... Aangezien het in overall_header staat, zou het altijd uitgevoerd moeten worden. Als ik de bron bekijk, staat het er ook netjes in. Waarom wordt het dan niet uitgevoerd?

[Ger]

Wow, ik zie nu dat het in IE6 wel erg lelijk wordt zo. Da's niet goed. Ik snap verdomme alleen nog niet waarom het nou mis gaat. Het maakt niet uit wat ik probeer, hij lijkt het gewoon te negeren.

Zou het kunnen liggen aan het aparte frame ofzo? Maar met voorbeeld bericht zou dat toch niet uit moeten maken...
Zoals je al zult begrijpen: ik snap niet waarom de javascript genegeerd wordt. Als iemand hiermee zou kunnen helpen, graag.

Overigens denk ik dat dit meer richting een modificatie gaat, inmiddels.

[Tazmanian]

Idd ik snap het ook niet. Heb de code al op verschillende plaatsten gezet maar telkens zonder resultaat!

Wanneer ik alle pagina's bekijk via Firefox heb ik daar net hetzelfde resultaat als bij IE.
ALLEEN, wanneer ik reply wordt mijn pagina niet uitgerokken! De images wordt NIET verkleind maar de inline frame doet daar zijn werk wel. Dacht dat dat ook de bedoeling was dat het ook zo bij IE was, maar blijkbaar lukt dat niet.

[Ger]

Hmm… ik denk dat het met de editor.js te maken heeft. Daarin wordt ook een onload functie uitgevoerd, waardoor die van de resize mod overschreven wordt. Stukjes code:

Code: Selecteer alles

 var baseHeight;
onload_functions.push('initInsertions()');

En iets verder:

Code: Selecteer alles

 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();
		}
	}
}

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)

Zover ik het begrijp is dit een puur probleem voor op subsilver2 gebaseerde stijlen, zoals die van jou en mij dus. ProSilver heeft geen aparte editor.js. Ik weet verder niet hoe die precies in elkaar zit, maar blijkbaar zit daar dus niet zo'n overrulende onload in.

[Tazmanian]

Ok, maar waarom doet ie het dan wel goed wanneer je een topic bekijkt, maar niet bij de reply en preview pagina.

[Ger]

Omdat editor.js alleen aangeroepen wordt vanuit posting.php.
Die editor is het stuk waar jij je bericht in typt, waar de knoppen van de BBcode instaan, etc. Dat wordt niet geladen in viewtopic.php.

[Ger]

Woohooo, ik hebt 't gevonden!

Zoals gezegd, die onload in editor.js blokkeerde de boel. Dus moest ik een andere manier vinden om de functie te callen, en da's gelukt.

Wat je nu nog moet doen:

Spoiler: bekijk

OPEN

Code: Selecteer alles

styles/.../template/overall_header.html

FIND AND DELETE

Code: Selecteer alles

window.onload = resizeimg;

FIND

Code: Selecteer alles

<body class="{S_CONTENT_DIRECTION}">

REPLACE WITH

Code: Selecteer alles

<body onmouseover="resizeimg()" class="{S_CONTENT_DIRECTION}">

SAVE/CLOSE ALL FILES

Wat dit doet is niet bij het laden van de pagina de functie uitvoeren, maar zodra de muis op de pagina komt. Tikkie minder netjes, maar werkt perfect in zowel IE, FF en Opera. En dan is't mij goed.

[Tazmanian]

Bedankt,

je bent mijn held.
Maar heb het nog een beetje anders gedaan!!

In mijn overall header zet ik die code niet maar ik doe hetvolgende.

In viewtopic_body.html plaats ik:

Code: Selecteer alles

<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 > 600)
         {
            img.style.width = '600px';
            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>

Zo wordt de code mooi geladen bij het laden van de pagina, en niet met de muis erover. Code hoeft dan ook niet in de overall header te staan, en wordt het script ook niet geladen op pagina's waar dit niet nodig is.

In posting_preview.html en posting_topic_review.html plaats ik dan

Code: Selecteer alles

<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 > 600)
         {
            img.style.width = '600px';
            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>
<body onmouseover="resizeimg()">

De resize mod werkt zo perfect bij mij.

[Ger]

Zo kan het natuurlijk ook.
Ik had het echter bewust in overall_header gedaan, zodat het ook goed komt met de PB's en eventuele toekomstige pagina's. Want hoe dan ook, elk plaatje >500px wil ik laten resizen. En ik heb liever 1 bestand dat ik aanpas dan meerdere. Maar da's een persoonlijke keuze natuurlijk.

Hoe dan ook, ik ben blij dat het voor jou ook werkt.
Voor het nageslacht heb ik de modificatie toegevoegd aan de Wiki.

[Tazmanian]

En in de viewtopic_print.html kan het ook

[Tazmanian]

Ja, is natuurlijk een persoonlijke keuze.

Ik doe het liever afzonderlijk. Zo kan je op verschilende pagina's zelfs verschillende grootte instellen.
En heb het liefst dat in het bekijken van de topic de resizer direct wordt aangeroepen bij het laden van de pagina.

Voor PB's heb ik het niet nodig. Heb zelf op mijn forum nog nooit een pb gekregen of verzonden waar een img inzat.

Heb nu nog enkel een probleem op de reply pagina bij de style fusibice2, maar dat is voor een andere topic natuurlijk.

Bedankt voor de hulp!

[Ger]

In printview komt-ie bij mij niet, en dat komt weer omdat de printview geen overall_header laadt. Dat hoeft van mij ook niet, aangezien ik mooie detailfoto's van zwaardjes die iemand wil uitprinten niet wil vernaggelen.

[Tazmanian]

OK, maar wat gebeurd er dan als iemand een pagina wil afdrukken met een levensgrote foto op?

[Ger]

Pfoei... ik ben een beetje een grafisch onbenul, dus pin me er niet op vast...
Maar als ik zo kijk wordt weliswaar de opmaak iets verstoord, maar zolang het op de breedte van een A4'tje past is er niets aan de hand. Bedenk dat een A4 een stuk breder is dan 500 pixels (hoeveel pixels precies, geen idee maar wel een stuk meer) en je geen zijbalk hebt met userinfo.

Wordt het te breed voor een A4, dan zal er waarschijnlijk een randje afvallen, of daarvoor een aparte pagina geprint worden zoals je ook wel eens met excelbestanden ziet ofzo.

[lifeguard]

-Fout-

[Ger]

(...)
De resize mod werkt zo perfect bij mij.

..niet dus.
Bij mij gaf-ie in IE6 nog een probleem, dus ik ging eens kijken hoe het er dan bij jou uitzag (account Gertest is van mij). Zowel in IE6 als 7 gaat het bij jou ook nog mis: de plaatjes worden wel geresized, maar de opmaak wordt verbroken. Misschien dat jij dat niet ziet doordat je resolutie groot genoeg is?

Het topic waarin ik keek is http://forum.kartgrid.be/viewtopic.php?f=14&t=4511

[Tazmanian]

De minimum resolutie die nodig is om mijn forum te bekijken is 1024x768.
Indien het kleinder is wordt de opmaak idd verbroken. Je kan dit oplossen door de plaatjes nog kleiner te maken. Maar op mijn forum maakt dit niet uit aangezien het menu dan te breed is?

P.S.: Heb je account momenteel verwijderd.