[問題]利用內建之列印功能...文章內的圖片無法列印(已解決)

[jzdai0903]

利用內建之列印功能...文章內的圖片無法列印

實際上文章內有圖片

列印模式無圖片...只有圖片檔名

該如何修改才能讓列印模式也有圖片呢?

請指教...謝謝

●架設主機作業系統：linux
●您的上網方式：hinet adsl
●您安裝的程式：Apache+PHP+mysql
●您的 phpBB3 版本：phpBB3.0+竹貓中文語言檔
●您的 phpBB3 使用風格：prosilver
●您的 domain(網域名稱) ：nonamexpe.duc.cc
●您的 phpBB3 連結網址： http://nonamexpe.duc.cc
●測試帳號 test 密碼123456

[wasabi]

進入列印模式時 打開原始碼就會發現其實所有圖片都在 只是CSS不讓他們顯示出來而已

解決問題的方法很簡單 打開/styles/你的風格/theme/print.css

找到這行(或類似)：

代碼: 選擇全部

img, .noprint, #sub-header, #sub-footer, .navbar, .box1, .divider, .signature { display: none; }

在他後面補上：

代碼: 選擇全部

.attach-image img { display: block; }

這樣就可以蓋過上面的設定 讓附件的圖片顯示出來了._./

ps. 記得重新整理主題...

[kaisuny]

請問如何讓

代碼: 選擇全部

[img] ...[/img]

內的圖片也顯現出來呢?

[wasabi]

在同樣的地方加入：

代碼: 選擇全部

.content img {
	display: block;
}

老樣子 記得重新整理主題

[jzdai0903]

目前已可以正常顯示出圖片...

不過該如何修改才能達到顯示出來的圖片可以有縮圖的功能呢?

例如圖片寬度最大顯示為600...類似下面放在viewtopic_body.html內的語法...

代碼: 選擇全部

<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 > 600) 
         { 
            im.style.width = '600px'; 
            eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=400,height=400,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 = '按此, 觀看完整大小的圖片'; 
         } 
      } 
   } 
} 

</script>

[wasabi]

幫你改好了，請服用：

代碼: 選擇全部

<script type="text/javascript">
// <![CDATA[
onload_functions.push('resizeimg()');
function resizeimg() 
{
	var width_constraint = 600;
	if (document.getElementsByTagName) 
	{
		for (i=0; i<document.getElementsByTagName('img').length; i++) 
		{
			im = document.getElementsByTagName('img')[i]; 
			if (im.width > width_constraint)
			{
				im.style.height = ((width_constraint * im.height) / im.width) + "px";
				im.style.width = width_constraint + "px";
				eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=" + width_constraint + ",height=400,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 = '按此, 觀看完整大小的圖片';
			}
		} 
	} 
} 
// ]]>
</script>

改完請記得重新整理樣板._./

[wasabi]

這個是只會縮文章圖片和附件圖片的版本，如果論壇上有文章以外的大圖(如Logo)就不會一起被表到。

代碼: 選擇全部

<script type="text/javascript">
// <![CDATA[
onload_functions.push('resizeimg()');
function resizeimg() 
{
   var width_constraint = 600;
   if (document.getElementsByTagName) 
   {
      for (i=0; i<document.getElementsByTagName('img').length; i++) 
      {
		 im = document.getElementsByTagName('img')[i]; 
		 
		 if (im.parentElement.className != 'content' &&
			im.parentElement.className != 'attach-image')
			continue;

         if (im.width > width_constraint)
         {
            im.style.height = ((width_constraint * im.height) / im.width) + "px";
            im.style.width = width_constraint + "px";
            eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=" + width_constraint + ",height=400,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 = '按此, 觀看完整大小的圖片';
         }
      } 
   } 
} 
// ]]>
</script>

[jzdai0903]

TO wasabi

我上面有說錯...

功能應該是...

預覽列印頁面中的圖片...

寬度超過600以上的圖片...就會縮成400 * 400

附件中的圖...文章內的圖...外部連結的圖都可以縮圖...


感謝你的回覆...不過這些語法要放在哪個檔案的哪邊QQ

另外這個主題的問題有解嗎?謝謝
http://phpbb-tw.net/phpbb/viewtopic.php?f=116&t=50477

[wasabi]

口厄... 你確定你要的是固定把圖縮成400 * 400而不是按比例縮放，例如800 * 600縮成400 * 300?

這個版本是把寬度多於400的固定縮成400 * 400：

代碼: 選擇全部

<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
   var width_constraint = 400;
   if (document.getElementsByTagName) 
   {
      for (i=0; i<document.getElementsByTagName('img').length; i++) 
      {
       im = document.getElementsByTagName('img')[i]; 
       
       if (im.parentElement.className != 'content' &&
         im.parentElement.className != 'attach-image')
         continue;

         if (im.width > width_constraint)
         {
            //im.style.height = ((width_constraint * im.height) / im.width) + "px";
            im.style.height = width_constraint + "px";
            im.style.width = width_constraint + "px";
            eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=" + width_constraint + ",height=400,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 = '按此, 觀看完整大小的圖片';
         }
      } 
   } 
} 
// ]]>
</script>

這個則是按比例縮放：

代碼: 選擇全部

<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
   var width_constraint = 400;
   if (document.getElementsByTagName) 
   {
      for (i=0; i<document.getElementsByTagName('img').length; i++) 
      {
       im = document.getElementsByTagName('img')[i]; 
       
       if (im.parentElement.className != 'content' &&
         im.parentElement.className != 'attach-image')
         continue;

         if (im.width > width_constraint)
         {
            im.style.height = ((width_constraint * im.height) / im.width) + "px";
            im.style.width = width_constraint + "px";
            eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=" + width_constraint + ",height=400,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 = '按此, 觀看完整大小的圖片';
         }
      } 
   } 
} 
// ]]>
</script>

把這段code放在styles/你的風格/template/viewtopic_print.html裡面

代碼: 選擇全部

<title>{SITENAME} &bull; {PAGE_TITLE}</title>

這一段底下就可以了。