Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Client Script Forum > jQuery Photo Gallery ไม่ทำงานกับ element ที่สร้างแบบ on the fly



 

jQuery Photo Gallery ไม่ทำงานกับ element ที่สร้างแบบ on the fly

 



Topic : 113852



โพสกระทู้ ( 213 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์




ผมได้ตัวอย่างมาจากเว็บไซต์นี้ครับ http://www.flashuser.net/tutorial/jquery-photo-gallery/ เป็น gallery ที่ใช้ Quicksand + PrettyPhoto

Quicksand จะแสดงภาพ thumbnail พอคลิ๊กที่ thumbnail จะไปเรียก PrettyPhoto ทำงานแบบสไลด์โชว์อีกที

ทีนี้ลองก๊อปทั้ง code ทั้งรูปอะไรมาลอง ซึ่งเป็นแบบ static ก็พอจะทำได้เหมือนตัวอย่าง แต่ code ส่วนสร้าง thumbnail ค่อนข้างยาว ก็เลยเกิดความคิดที่ว่าจะลองทำโดยสร้าง element แบบ on the fly

อันนี้เป็นส่วนที่สร้าง element

Code (JavaScript)
	$.getJSON('movies.txt', function(data) {
		var output="<ul>";
		for (var i in data.movies) {
			output += "<li class='portfolio-item' data-id='id-" + data.movies[i].id + "' data-type='cat-item-" + data.movies[i].category + "'>";
			output += "<div>";
			output += "<span class='image-block'>";
			output += "<a class='image-zoom' href='" + data.movies[i].imgbig + "' rel='prettyPhoto[gallery]' title='" + data.movies[i].title + "'>";
			output += "<img width='225' height='140' src='" + data.movies[i].thumbs + "' alt='" + data.movies[i].title + "' title='" + data.movies[i].title + "' /></a>";
			output += "</span>";
			output += "<div class='home-portfolio-text'>";
			output += "<h2 class='post-title-portfolio'><a href='" + data.movies[i].url + "' rel='prettyPhoto[ajax]' title='" + data.movies[i].title + "'>" + data.movies[i].title + "</a></h2>";
			output += "<p class='post-subtitle-portfolio'>released: 2008</p>";
			output += "</div>";
			output += "</div>";
			output += "</li>";
		}
		output+="</ul>";
		console.log(output);
		//document.getElementById("placeholder").innerHTML=output;
		//$('#placeholder').append(output);
		$('#placeholder').html(output);
	});	


ส่วนอันนี้เป็นข้อมูล movies.txt

Code (JavaScript)
{"movies":[
{"id":"0","category":"4","imgbig":"images/big/pic1.jpg","thumbs":"images/thumbs/p1.jpg","released":"2008","title":"Wall-E","url":"xhr_response.html?ajax=true&width=640&height=480&id=0"},
{"id":"1","category":"2","imgbig":"images/big/pic2.jpg","thumbs":"images/thumbs/p2.jpg","released":"2009","title":"Up","url":"xhr_response.html?ajax=true&width=640&height=480&id=1"},
{"id":"2","category":"1","imgbig":"images/big/pic3.jpg","thumbs":"images/thumbs/p3.jpg","released":"2011","title":"Cars 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=2"},
{"id":"3","category":"4","imgbig":"images/big/pic4.jpg","thumbs":"images/thumbs/p4.jpg","released":"2010","title":"Toy Story 3","url":"xhr_response.html?ajax=true&width=640&height=480&id=3"},
{"id":"4","category":"3","imgbig":"images/big/pic5.jpg","thumbs":"images/thumbs/p5.jpg","released":"2003","title":"Finding Nemo","url":"xhr_response.html?ajax=true&width=640&height=480&id=4"},
{"id":"5","category":"2","imgbig":"images/big/pic6.jpg","thumbs":"images/thumbs/p6.jpg","released":"2012","title":"Lorax","url":"xhr_response.html?ajax=true&width=640&height=480&id=5"},
{"id":"6","category":"1","imgbig":"images/big/pic7.jpg","thumbs":"images/thumbs/p7.jpg","released":"2011","title":"Happy Feet 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=6"},
{"id":"7","category":"1","imgbig":"images/big/pic8.jpg","thumbs":"images/thumbs/p8.jpg","released":"2010","title":"Tangled","url":"xhr_response.html?ajax=true&width=640&height=480&id=7"},
{"id":"8","category":"1","imgbig":"images/big/pic9.jpg","thumbs":"images/thumbs/p9.jpg","released":"2011","title":"Kung Fu Panda 2","url":"xhr_response.html?ajax=true&width=640&height=480&id=8"},
{"id":"9","category":"2","imgbig":"images/big/pic10.jpg","thumbs":"images/thumbs/p10.jpg","released":"2012","title":"Madagascar 3","url":"xhr_response.html?ajax=true&width=640&height=480&id=9"},
{"id":"10","category":"3","imgbig":"images/big/pic11.jpg","thumbs":"images/thumbs/p11.jpg","released":"2011","title":"Rango","url":"xhr_response.html?ajax=true&width=640&height=480&id=10"},
{"id":"11","category":"4","imgbig":"images/big/pic12.jpg","thumbs":"images/thumbs/p12.jpg","released":"2010","title":"Shrek Forever After","url":"xhr_response.html?ajax=true&width=640&height=480&id=11"}
]}


ตัวนี้เป็น script ที่เรียก Quicksand + PrettyPhoto ให้ทำงาน

Code (JavaScript)
jQuery.noConflict();
jQuery(document).ready(function($){
							
	function lightboxPhoto() {
		
		jQuery("a[rel^='prettyPhoto']").prettyPhoto({
				animationSpeed:'fast',
				slideshow:5000,
				theme:'light_rounded',
				show_title:false,
				overlay_gallery: false,
				social_tools: false
			});
		
		}
		
			if(jQuery().prettyPhoto) {
		
			lightboxPhoto(); 
				
		}
		
		
	if (jQuery().quicksand) {

		// Clone applications to get a second collection
		var $data = $(".portfolio-area").clone();
		
		//NOTE: Only filter on the main portfolio page, not on the subcategory pages
		$('.portfolio-categ li').click(function(e) {
			$(".filter li").removeClass("active");	
			// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
			var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
			
			if (filterClass == 'all') {
				var $filteredData = $data.find('.portfolio-item2');
			} else {
				var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
			}
			$(".portfolio-area").quicksand($filteredData, {
				duration: 600,
				adjustHeight: 'auto',
				adjustWidth: false
			}, function () {
					lightboxPhoto();
							});		
			$(this).addClass("active"); 			
			return false;
		});
		
	}//if quicksand

});


code เพจที่เรียกใช้
Code (ASP)
<html>
<head>
	<title>Tutorial - jQuery Photo Gallery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.quicksand.js" ></script>
	<script type="text/javascript" src="jquery.easing.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="jquery.prettyPhoto.js"></script> 
	<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
	<link href="prettyPhoto.css" rel="stylesheet" type="text/css" />    
</head>
<body>
<div class="wrapper" style="width:980px;">
   	<div class="portfolio-content" style="width:980px;">	
		<ul class="portfolio-categ filter">
			<li>categories:</li>
			<li class="all active"><a href="#">All</a></li>
         	<li class="cat-item-1"><a href="#" title="Category 1">Category 1</a></li>
			<li class="cat-item-2"><a href="#" title="Category 2">Category 2</a></li>
			<li class="cat-item-3"><a href="#" title="Category 3">Category 3</a></li>
			<li class="cat-item-4"><a href="#" title="Category 4">Category 4</a></li>
        </ul>
        
        <ul id="placeholder" class="portfolio-area" style="width:980px;">
			
			<div class="column-clear"></div>
		</ul><!--end portfolio-area -->
	</div><!--end portfolio-content -->
</div><!-- end wrapper -->  

<script type="text/javascript">
	$.getJSON('movies.txt', function(data) {
		var output="<ul>";
		for (var i in data.movies) {
			output += "<li class='portfolio-item' data-id='id-" + data.movies[i].id + "' data-type='cat-item-" + data.movies[i].category + "'>";
			output += "<div>";
			output += "<span class='image-block'>";
			output += "<a class='image-zoom' href='" + data.movies[i].imgbig + "' rel='prettyPhoto[gallery]' title='" + data.movies[i].title + "'>";
			output += "<img width='225' height='140' src='" + data.movies[i].thumbs + "' alt='" + data.movies[i].title + "' title='" + data.movies[i].title + "' /></a>";
			output += "</span>";
			output += "<div class='home-portfolio-text'>";
			output += "<h2 class='post-title-portfolio'><a href='" + data.movies[i].url + "' rel='prettyPhoto[ajax]' title='" + data.movies[i].title + "'>" + data.movies[i].title + "</a></h2>";
			output += "<p class='post-subtitle-portfolio'>released: 2008</p>";
			output += "</div>";
			output += "</div>";
			output += "</li>";
		}
		output+="</ul>";
		console.log(output);
		//document.getElementById("placeholder").innerHTML=output;
		//$('#placeholder').append(output);
		$('#placeholder').html(output);
	});	
</script>
</body>
</html>


ผลก็คือตอนรั้นมันสร้าง thumbnail ให้ครับ แต่เวลาคลิ๊กที่ภาพ หรือ link ตัว Quicksand + PrettyPhoto ไม่ทำงาน จะกลายเป็นเปิดหน้าใหม่ไปเลย ไม่เปิดเป็น popup ขึ้นมา เข้าใจว่าเป็นเพราะสร้าง element แบบ on the fly ทำให้ไม่สามารถอ้างอิง element ที่สร้างขึ้นมาใหม่ได้ พอจะมีวิธีแก้ไขหรือไม่ครับ

ขอบคุณครับ

มือใหม่หัดใช้ jQuery ครับ



Tag : JavaScript, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-01-18 22:19:40 By : Aod47 View : 1249 Reply : 1
 

 

No. 1



โพสกระทู้ ( 9,544 )
บทความ ( 2 )



สถานะออฟไลน์


54. $('#placeholder').html(output);
ต้องต่อด้วยการ กำหนดevent ให้กับ $('#placeholder')
เหมือนกับ <ul class="portfolio-categ filter"> ด้วยครับ
portfolio-categ ถูกกำหนดเมื่อเริ่มโปรแกรม
แต่ placeholder ถูกสร้างขึ้นภายหลัง


$('#placeholder').html(output).quicksand('yourParameter');


ปล.ผมไม่เคยใช้ quicksand นะครับ ไม่รู้วิธีเรียกใช้อย่างไร
หลักการคือ เมื่อสร้างใหม่ ก็ต้องทำให้มันรู้ว่านี่คือที่ต้องทำ
น่าจะเขียนเป็น function ขึ้นมา เพื่อเรียกใช้แบบ dynamic

Code (JavaScript)
function myQuicksand( obj , parameter ){
     $(obj).quicksand( parameter );
}









ประวัติการแก้ไข
2015-01-19 07:46:23
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-01-19 07:39:54 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : jQuery Photo Gallery ไม่ทำงานกับ element ที่สร้างแบบ on the fly
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่