jQuery ...จะลงเเดงแล้ว ปัญหาย้ายตําเเหน่งพาเนทสไลด์โชว์

นิติพงษ์ · 05 ตุลาคม 2010, 22:29:57

ปัญหาgalleryviewกาลารี่สไลด์โชว์คับ
คริปสไลด์โชด์จากเว็บ

http://spaceforaname.com/galleryview

ต้องการให้ตรง Overlay ข้อความและเเบ็ดกราวน์ด ให้มันเป็นเเนวตั้ง
ของเดิมมันเป็นเเนวนอนอะครับ (ดูรูป)
ผมลองไปเเก้ที่ css (เเนบ) รู้สึกมันไม่ได้
ไม่กระดิกเลยอะคับ พบว่ามันถูกกําหนดรูปเเบบไว้ที่ ไฟล์ .js (เเนบ)

รบกวนดูให้หน่อยคับ ต้องการทําเเถบ overlay เป็นเเบบเเนวตั้งเเบบในรูปนี้

โหลด code jquery.galleryview-1.1.js เเบบเต็มที่นี้คับ http://code.google.com/p/hackublox/downloads/detail?name=jquery.galleryview-1.1.js&can=2&q=

และ code ผมย่อมา ไม่รู้ว่าใช่ตรงนีมั้ยนะครับ

โค้ด เลือก

j_panels.css({
				'width':(opts.panel_width-parseInt(j_panels.css('paddingLeft').split('px')[0],10)-parseInt(j_panels.css('paddingRight').split('px')[0],10))+'px',
				'height':(opts.panel_height-parseInt(j_panels.css('paddingTop').split('px')[0],10)-parseInt(j_panels.css('paddingBottom').split('px')[0],10))+'px',
				'position':'absolute',
				'top':(opts.filmstrip_position=='top'?(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top))+'px':'0px'),
				'left':'0px',
				'overflow':'hidden',
				'background':'white',
				'display':'none'
			});
			$('.panel-overlay',j_panels).css({
				'position':'absolute',
				'zIndex':'999',
				'width':(opts.panel_width-20)+'px',
				'height':opts.overlay_height+'px',
				'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
				'left':'0',
				'padding':'0 10px',
				'color':opts.overlay_text_color,
				'fontSize':opts.overlay_font_size
			});
			$('.panel-overlay a',j_panels).css({
				'color':opts.overlay_text_color,
				'textDecoration':'underline',
				'fontWeight':'bold'
			});
			$('.overlay',j_panels).css({
				'position':'absolute',
				'zIndex':'998',
				'width':opts.panel_width+'px',
				'height':opts.overlay_height+'px',
				'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
				'left':'0',
				'background':opts.overlay_color,
				'opacity':opts.overlay_opacity
			});
			$('.panel iframe',j_panels).css({
				'width':opts.panel_width+'px',
				'height':(opts.panel_height-opts.overlay_height)+'px',
				'border':'0'
			});
		};

นิติพงษ์ · 06 ตุลาคม 2010, 10:13:19

ยังไม่ได้เลย หุหุ

yoyokung · 06 ตุลาคม 2010, 10:36:36

ไหนลองส่ง code มาสิครับ

เอามาให้ครบ

DarkNinja · 06 ตุลาคม 2010, 10:46:35

สู้ๆครับ ทำได้แต่ยากหน่อย ครับ
เพราะมันเขียนเป็น obj ไปเลยอะครับ ต้องไปเพื่มclass ใน methods มันครับ

แต่ยังไงคนในบอร์ดนี้เก่งๆกันเยอะครับ เดียวทำได้แน่

นิติพงษ์ · 06 ตุลาคม 2010, 11:12:21

ฝากโค๊ดทั้งหมด ไว้ตามลิงก์คับ
เพื่อนๆโหลดไปดูได้เลยคับ

และช่วยดูให้หน่อยคับ
อยากได้ตามรูปเเนวตั้งอ่าคับ
พอดีจาวาไม่เป็นเลย หุหหุ
ขอบคุงคับ

http://www.tempf.com/getfile.php?id=741128&key=4cabf4a96811f

yoyokung · 06 ตุลาคม 2010, 11:46:27

อ้างถึงจาก: นิติพงษ์ ใน 06 ตุลาคม 2010, 11:12:21
ฝากโค๊ดทั้งหมด ไว้ตามลิงก์คับ
เพื่อนๆโหลดไปดูได้เลยคับ

และช่วยดูให้หน่อยคับ
อยากได้ตามรูปเเนวตั้งอ่าคับ
พอดีจาวาไม่เป็นเลย หุหหุ
ขอบคุงคับ

http://www.tempf.com/getfile.php?id=741128&key=4cabf4a96811f

เดี๋ยวลองดูให้นะครับ

yoyokung · 06 ตุลาคม 2010, 12:03:38

โหลดไฟล์นี้ไปแทนที่ไฟล์เดิมนะครับ

http://www.tempf.com/getfile.php?id=741221&key=4cac010339b46

แล้วก็อันนี้เวลาเรียกใช้ จะได้ง่ายๆครับ

ใส่ระหว่าง <head>...</head>

โค้ด เลือก


<script type="text/javascript">
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 100,
			frame_height: 100,
			// ตัวแปรเพิ่มเติมในฟังก์ชั่นครับ
		// กำหนด ค่าต่างๆ ของ Overlay Caption
		overlay_width: 300,
		overlay_height: 300,
		overlay_font_size: '1em',
		overlay_opacity: 0.6,
		overlay_color: 'black', // รหัส หรือ ชื่อสี เช่น red , #ff4add
		overlay_text_color: 'white',
		
		overlay_left: 50, // ระห่างของ caption จากด้านซ้าย
		overlay_position: 'bottom', // ตำแหน่ง จากด้านบน หรือล่าง top , bottom
			
		});
	});
</script>

Jojosung · 06 ตุลาคม 2010, 12:15:50

เอาแบบลึกซึ้ง .. หรือเปล่า

ไฟล์ style.css

บรรทัดที่ 110

จาก

margin: .3em 0;

เปลี่ยนเป็น width: 200px; <-- ตรงนี้เลือกเอาว่าจะเอาขนาดไหน

ไฟล์ jquery.galleryview-1.1.js

บรรทัดที่ 227

จาก

'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),

เปลี่ยนเป็น

'top':'10px',

บรรทัดที่ 241 - 243

จาก

            'width':opts.panel_width+'px',
            'height':opts.overlay_height+'px',
            'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),

เปลี่ยนเป็น

            'width':'200px', <-- ตรงนี้เลือกเอาว่าจะเอาขนาดไหน
            'height':'500px',
            'top':'0',

gootooyoo · 06 ตุลาคม 2010, 12:20:36

in fix สุโค้ย ๆ

นิติพงษ์ · 06 ตุลาคม 2010, 21:00:57

สุดโค่ยย....
yoyokung Jojosung
ขอบคุณมากคับ

ปล.
หากต้องการโมเป็นเเบบรูปข้างนี้ได้มั้ยคับ

yoyokung · 08 ตุลาคม 2010, 02:10:31

Fail

jQuery ...จะลงเเดงแล้ว ปัญหาย้ายตําเเหน่งพาเนทสไลด์โชว์

นิติพงษ์

นิติพงษ์

yoyokung

DarkNinja

นิติพงษ์

yoyokung

yoyokung

Jojosung

gootooyoo

นิติพงษ์

yoyokung