Hiệu ứng phóng to ảnh sử dụng jQuery

Hiệu ứng này sẽ giúp trong việc trình bày các hình ảnh trong một cách rất đẹp trong blog của bạn.Nó giúp để trình bày hình ảnh với nhiều kích thước hơn bằng cách phóng to để xem kích thước thật của ảnh gốc.File script này được đưa ra bởi Dynamicdrive. Vì vậy bạn có thể tìm thấy đoạn script tại trang web này.

Demo: thử nháy chuột vào hình xem thế nào.(^^!)

Để thao tác, bạn làm như sau:

1. Bạn chèn đoạn code bên dưới và trên thẻ </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/560192341/magnifier.txt.js">
</script>

2. Để sử dụng, trong bài đăng có chứa ảnh bạn sử dụng đoạn code dưới cho ảnh bài đăng.

<img class="magnify"  magnifyby="3" style="width: 200px; height: 250px;" src="URL_IMAGE" alt="" border="0" />

Thay URL_IMAGE bằng một LINK ẢNH  .

 4. Test thử xem kết quả thế nào nhé. Còn bạn nào muốn tải file js về sử dụng cho host riêng thì có thể tải tại đây.

Nguồn: Bloggerzbible

Best WYSIWYG Editor kindeditor-Trình WYSIWYG Editor cực đỉnh mà đơn giản

Kind editor is a powerful yet easy to use, online web-base html editor, which allows users to edit web page in WYSIWYG way. It is compatible with IE, Firefox, Chrome, Safari, Opera and other popular browsers over different platforms.
Written in javascript, Kind editor could be integrated with any backend technology, such as Java, .NET, PHP, ASP and RoR. Kind editor has been widely used in different CMS(Content Management System), shopping, forum, blog, wiki, email and other web based applications. With excellent user experience, it is becoming one of the most poplular editors.

Demo
http://www.kindeditor.com/examples/w...e-gallery.html

 File Kèm Theo

•  kindeditor.zip (461.3 KB, 694 lần tải)

Lập trình hướng đối tượng với mô hình 3 lớp (3 layers)

Lưu ý: Các bạn không nên nhầm lẫn khái niệm lớp(layer) trong phần này với khái niệm lớp(class) của các ngôn ngữ lập trình hướng đối tượng.

Trong phát triển ứng dụng, để dễ quản lý các thành phần của hệ thống, cũng như không bị ảnh hưởng bởi các thay đổi, người ta hay nhóm các thành phần có cùng chức năng lại với nhau và phân chia trách nhiệm cho từng nhóm để công việc không bị chồng chéo và ảnh hưởng lẫn nhau. Ví dụ trong một công ty bạn có từng phòng ban, mỗi phòng ban sẽ chịu trách nhiệm một công việc cụ thể nào đó, phòng này không được can thiệp vào công việc nội bộ của phòng kia như Phòng tài chính thì chỉ phát lương, còn chuyện lấy tiền đâu phát cho các anh phòng Marketing thì các anh không cần biết.

Trong phát triển phần mềm, người ta cũng áp dụng cách phân chia chức năng này. Bạn sẽ nghe nói đến thuật ngữ kiến trúc đa tầng/nhiều lớp, mỗi lớp sẽ thực hiện một chức năng nào đó, trong đó mô hình 3 lớp là phổ biến nhất. 3 lớp này là gì? Là Presentation, Business Logic, và Data Access. Các lớp này sẽ giao tiếp với nhau thông qua các dịch vụ(services) mà mỗi lớp cung cấp để tạo nên ứng dụng, lớp này cũng không cần biết bên trong lớp kia làm gì mà chỉ cần biết lớp kia cung cấp dịch vụ gì cho mình và sử dụng nó mà thôi.

1. Giới thiệu các thành phần của mô hình 3layer

Mô hình layer gồm có 3 layer:

• Layer GUI (Graphics User Interface)
• Layer Business Logic (Đây là layer để xử lý các dữ liệu, thông tin trước khi đưa lên giao diện hoặc đưa xuống dữ liệu.)
• Layer Data Access – Layer này sẽ nói chuyện Data.

1.1. GUI Layer.

• Đây là layer tạo lên giao diện cho người dùng, nó sẽ là nơi tiếp nhận và kết xuất ra kết quả của chương trình cho bạn.
• Nó có nhiệm vụ xử lý, kiểm tra các dữ liệu nhập vào ( ví như ở TextBox này nó phải là số, số phải từ 1-9….).
• Nó tiếp nhận các Event của người dùng, kiểm tra dữ liệu được nhập vào, gửi yêu cầu xử lý xuống tầng kế tiếp.

1.2. Business Logic Layer

• Đây là layer xử lý chính các dữ liệu trước khi được đưa lên hiển thị trên màn hình hoặc xử lý các dữ liệu trước khi lưu dữ liệu xuống cơ sở dữ liệu.
• Đây là nơi đê kiểm tra các yêu cầu nghiệp vụ, tính toán các yêu cầu nghiệp vụ.
• Tại đây các tính năng tính toán trong chương trình sẽ được thực thi. (Như tính lương theo một công thức.)

1.3. Data Access Layer

• Layer này sẽ lo nhiệm vụ là đọc cơ sở dữ liệu lên, cập nhật cơ sở dữ liệu, update cơ sở dữ liệu.
• Nói chung là nó làm nhiệm vụ là nói chuyện phải trái với database.

1.4. Cách các layer “nói chuyện” với nhau.

Vấn đề đặt ra ở đây là 3 layer này ‘Nói chuyện’ với nhau như thế nào

Nhìn vào sơ đồ ta cũng sẽ nhận được câu trả lời:

Quá trình hiển thị dữ liệu:

Data Access layer nói chuyện với Database và lấy dữ liệu lên theo một cách nào đó (có thể là bằng câu lệnh select hay thông qua proceduce) lúc này sau khi lấy được dữ liệu lên thì nó sẽ đẩy lên Business layer tại đây Business cần nhào bột, thêm mắm muối rồi đẩy nó lên trên GUI và tại GUI nó sẽ hiển thị lên cho người dùng

Quá trình đưa dữ liệu xuống.

Người dùng thao tác với GUI layer sau đó ra lệnh thực hiện (ví như Insert) sau đó hệ thống sẽ kiểm tra các thông tin người dùng nhập vào nếu thỏa đi xuống tiếp layer Business để tiếp tục được nhào nặn, tính toán và kiểm tra sau khi xong thì dữ liệu được đẩy xuống thông tin phía dưới Data Access Layer sau đó tại DataAccess Layer sẽ thực thi nó xuống database.

1.5. Cách xử lý “lỗi” trong mô hình 3 layer.

Một khi gặp lỗi (các trường hợp không đúng dữ liệu) thì đang ở layer nào thì quăng lên trên layer cao hơn nó 1 bậc cho tới GUI thì sẽ quăng ra cho người dùng biết.

1.6. Demo mô hình 3 layer trong chương trình quản lý

DOWNLOAD DEMO

Hướng dẫn sử dụng Proshow Producer

1. Phần I: Mở đầu

   Proshow Producer là một phần mềm thông dụng hiện nay cho phép người sử dụng tạo những đoạn phim hay những đoạn flash dưới dạng trình diễn show ảnh.
    ^{Home Page}
   
   Link Download: Để download bạn vào phần tìm kiếm của softvnn, đảm bảo rằng lúc nào cũng có link mới nhất  
   
   Newest in softvnn(12/5/08):
   

   Code:

   http://www.softvnn.com/forum/showthread.php?t=87394&highlight=Proshow+Producer

   
   

   Phần II: Hướng dẫn sử dụng

   
   
   Giao diện của chương trình:
   
   
   
   Các hiệu ứng chuyển cảnh:
   
   
   
   
   A/ Slide Options
   Kích đúp vào một bức ảnh hay một đoạn video bất kỳ (sau khi đã thả vào khung Slide) hiện lên bảng Slide Option: lựa chọn kiểu trình chiếu trong riêng bức ảnh hoặc video đó.
   
   
   
   
   I/ Tab Layer 
   Lựa chọn các bức ảnh hay đoạn phim ***g vào Slide:
   
   
   
   
   1/ Content of Slides:
   Thêm các lớp vào bức ảnh của bạn (tối đa 100 files). Hỗ trợ tính trong suốt cho file gif, png, psd.
   Click vào biểu tượng dấu cộng sẽ có 4 dòng cho bạn lựa chọn (chèn Image / Video vào slide, thêm lớp màu, lớp tuyến tính, XYZ?
   2/ Layer Settings : Khung điều chỉnh cho lớp
   3/ Masking: Chuyển bất kì lớp nào thành 1 mặt nạ, tùy chọn hoàn toàn để che giấu hay làm lộ ra các góc độ của các lớp phía dưới, thường ứng dụng làm những nét mờ cho show. Phần này khá là hay và bạn nên chú ý để bạn có thể tạo ra những hiệu ứng sáng tạo.
   a/ On/Off : Lựa chọn Layer để làm mask
   b/ Mask Depth: Số lớp còn lại mà layer làm mask này che đi.
   c/ Channel: Chọn kiểu che đi theo kênh màu nâu hoặc là trong suốt
   d/ Invert: Đảo ngược kiểu Mask (tạm hiểu vậy- ko biết giải thích thế nào :d)
   Mask chỉ được áp dụng khi số Lớp mà bạn chèn vào lớn hơn 1
   4/ Video Clip Settings: Nếu bạn add một lớp là một file Video thì Video Clip Settings cho phép bạn chỉnh sửa đoạn phim đó theo ý thích:
   a/Trim Clip:
   Giả như bạn chèn file video vào mà không muốn chèn cả mà chỉ muốn chèn một đoạn trong đó thì ấn vào Trim Clip:
   
   
   Ấn Play, chọn Start Here cho bắt đầu đoạn và End Here cho kết thúc. Bạn có thể di chuột vào Video Timeline để trực tiếp chỉnh.
   Note: Tính năng này có thể áp dụng để cắt và nhập một đoạn phim bất kỳ.
   b/ Volume: Âm thanh cho đoạn phim
   c/Speed: Điều chỉnh nhanh chậm cho đoạn video.
   II/ Tab Editting
   Thay đổi bức ảnh hoặc phim của bạn theo ý thích:
   
   
   1/Edditing Tools 
   - Rotare: chọn kiểu xoay ảnh
   - Flip: Kiểu lộn ảnh( lộn trên xuống dưới, lộn trái sang phải)
   - Vignette: Tạo khung cho bức ảnh, tùy chọn các kiểu khung.
   - Red eye: Loại bỏ hiện tượng mắt đỏ(khi chụp ảnh hay bị)
   - Crop: Điều chỉnh lại kích cỡ ảnh
   2/Adjustments
   -Opacity: Độ mờ đục
   -Brightness: Độ sáng
   -White Point: Độ trắng
   -Black Point: Độ đen
   -Contrast: Độ tương phản
   -Hue: Thay đổi màu theo các lớp màu trên bức ảnh
   -Sharpen: Độ đứt gấy nét ảnh
   3/Chroma Key Transparency: Tạo các hiệu ứng mở màn theo phong cách Mỹ - Hollywood-Style (???). Tạo các khoảng màu cụ thể kết hợp với Masking ở Tab Layer để tạo những hiệu ứng sáng tạo
   
   4/Colorize, Outline, Drop Shadow: Thay đổi màu, tạo đường viền, tạo bóng cho lớp.
   III/ Tab Effect
   Tạo những hiệu ứng chuyển cảnh thay đổi như màu, độ mờ nhạt…
   
   
   Bên trái là bắt đầu, và bên phải là kết thúc. Chú ý là phải thiết lập thông số 2 bên khác nhau mới thấy được các hiệu ứng.
   -Opacity: Độ mờ đục
   -Brightness: Độ sáng
   -White Point: Độ trắng
   -Black Point: Độ đen
   -Contrast: Độ tương phản
   -Hue: Thay đổi màu theo lớp (màu)
   -Sharpen: Độ đứt gấy nét ảnh
   -Colorize: Chọn lại màu cho bức ảnh(#hue)
   Ngoài ra bên cạnh còn các ô hiển thị chế độ cho từng phần (Manual – thiết lập, Auto – tự động; chỉ áp dụng cho Key Frames.)
   
   Phần này thật chú ý đến Key Frames( rất quan trọng)
   Ấn vào Add Key Frames( nút hình dấu cộng) Proshow Producer sẽ chèn một Key Frames( tạm gọi là một lớp chuyển tiếp).
   Trong hình 3 ô khoanh là 3 Key Frames, số lượng Key Frames có thể nhiều hơn. Thời gian giữa các Key Frames có thể chỉnh bằng cách kéo thả các Key Frames, hoặc nháy chuột phải vào nó chọn "Set Time"
   Tính năng: rất khó giải thích tính năng của Key Frames nhưng mình lấy một ví dụ như sau: Nếu bạn muốn bức hình của mình nhấp nháy chẳng hạn, thì add thật nhiều lớp chuyển tiếp, chỉnh Hue cho từng lớp ( nhớ phải bằng nhau), chỉnh các khoảng thời gian thật nhỏ( <0.2s) giữa các lớp. Sau đó play thử xem nó nhấp nháy thế nào. Thông thường nếu không có Key Frames thì bạn chỉ làm cho nó chuyển từ màu này sang màu khác, Key Frames giúp cho các kiểu trình chiếu đa dạng hơn.
   IV/Tab Motion
   Tạo các hiệu ứng chuyển động :
   
   
   -Pan: di chuyển theo tọa độ
   -Zoom X: Phóng to theo trục Ox
   -Zoom Y: Phóng to theo trục Oy
   -Rotate: Xoay ảnh
   -Smooting: Độ nhẵn bóng(?: mình thấy phần này không hiệu quả lắm)
   Motion Style: Kiểu chuyển động: - Smooth: Nhẹ nhàng
   - Linear: Theo dòng
   - Accelerate: Nhanh dần
   - Decelerate: Chậm dần
   
   Key Frames:
   Thông thường, nếu không sử dụng Key Frames thì bạn chỉ tạo được những kiểu chuyển động đơn giản, ví dụ như chỉ tạo được chuyển động theo đường thẳng, hay chỉ có phóng to ra. Nhưng khi sử dụng Key Frames thì bạn có thể tạo những chuyển động phức tạp hơn như the đường tròn, đường cong hay đường gấp khúc. Slide trình chiếu của bạn cũng có thể lúc to ra lúc nhỏ vào, hay lúc xoay trái lúc xoay phải. Để làm những việc này chỉ việc add key frames và chỉnh thời gian giữa các Key Frames, thiết lập thông số chuyển động cho từng Key Frames. Chú ý rằng bạn có thể thiết lập thông số trực tiếp bằng cách di chuột vào ô Priview(là ô hiện lên hình bức ảnh) và kéo thả.

   Lần sửa cuối bởi Cry, ngày 28-05-2008 lúc 05:38 PM.

   Trả lời   Trả lời kèm Trích dẫn    Thanks  

2. The Following 18 Users Say Thank You to Cry For This Useful Post:

   6be0, chunga, digitalboy, hoang1819, kiengia261, Mediterraneo, nguyenhuu43, philipst0nybi, Phoenix92, potw, Soicodon, SwimInBlueSky,tackehoa2301, tunar, vel.n2, WhatCanIdo?, xZoZox, zuckee1

3. 
4. 01-09-2007, 06:05 PM#2

   
   

   Cry 

   Thành viên Softvnn
   

   Ngày tham gia

   Aug 2007

   Bài viết

   66

   Thanks

   83

   Thanked 112 Times in 13 Posts

   V/ Tab Captions
   Tạo chữ trong Slide:
   
   
   1/ Caption List: danh sách những đoạn chữ mà bạn ***g vào. Ấn vào nút hình dấu cộng để add, lựa chọn nó để có thể thiết lập nó theo ý thích.
   2/ Text: Đánh đoạn chữ mà bạn muốn ***g
   a/ Style: Lựa chọn phong cách chữ của bạn do Proshow Producer thiết lập sẵn. Ấn vào Styles để xem trước.
   b/ Font: Lựa chọn font chữ, cỡ chữ
   
    : In đậm
   
    : In nghiêng
   
    : Khoảng cách giữa các dòng chữ
   
    : Khoảng cách giữa các chữ trong dòng.
   
   Macro: Chèn ký tự đặc biệt
   3/ Caption Placement: Lựa chọn kiểu Style theo ý mình( ko dùng những cái có sẵn của chương trình).
   a/ Align: Căn dòng ( Trái, phải, giữa)
   b/ Position: Vị trí đặt text theo trục Oxy
   c/ Rotate: Xoay chữ
   d/ Skew: Độ nghiêng của chữ
   e/ Opacity: Độ mờ nhạt
   f/ Caption color: Chọn màu chữ
   g/ Outline Caption: Chọn đường viền và màu của đường viền
   h/ Drop Shadow: Tạo bóng cho chữ
   4/ Use Texture on Caption:
   a/ Image: Chọn màu nền cho chữ dựa trên những file ảnh có trong máy bạn
   b/ Gradient: Chọn màu tuyến tính ( đẹp!) cho chữ và thiết lập màu đó theo ý thích bằng cách ấn vào Edit Gradient
   c/ Zoom: độ phóng to của Image/Gradient được lựa chọn ( thử chỉnh nhỏ hơn 100% để có những màu lạ mắt)
   5/ Text Effect:
   a/ Fly in: Kiểu xuất hiện chữ
   b/ Normal: Kiểu trình chiếu chữ
   c/ Fly out: Kiểu biến mất chữ
   
   Bạn nên ấn vào Select để biết rõ chi tiết hơn.
   VI/ Tab Captions Motion
   Hiệu ứng chuyển động cho chữ:
   
   
   Bên trái là lúc bắt đầu, bên phải là lúc kết thúc
   Phần này tương tự phần Motion.
   1/ Font Size : =Zoom
   2/ Postion : =Pan
   3/ Rotate: Xoay cả đoạn chữ
   4/ Char: Xoay các chữ cái
   5/ Skew: Nghiêng các chữ cái.
   
   Phần này dùng Key Frames bạn có thể áp dụng ***g lời cho bài hát hay ***g phụ đề cho đoạn phim ( tuy để ***g được thì hơi bị mệt)
   
   VII/ Tab Sounds
   Chèn âm thanh cho riêng Slide mà bạn chọn:
   
   
   1/ Sound: Chọn âm thanh từ những file nhạc có sẵn trong máy
   2/ Record: Ghi âm từ ngoài vào
   3/ Offset: Thời gian bắt đầu so với bức ảnh (0 là cùng bắt đầu, >0 là bắt đầu sau)
   4/ Trim Audio: Tương tự Trim Video.
   5/ Timing: Chọn thời gian trình chiếu = thời gian của đoạn âm thanh ***g vào.
   Phần này có thể áp dụng để ***g tiếng cho đoạn phim.
   VIII/ Background
   Chọn nền cho Slide (Thông thường như ví dụ của mình là màu đen). Có thể chọn nền là một bức ảnh có sẵn trong máy, một màu, hoặc là một lớp tuyến tính:
   
   Phần này rất dễ, dành cho các bạn tự tìm hiểu.
   B/ Show Option
   
   Nháy chuột phải vào ô Slide bất kỳ chọn Show Option:
   
   
   Về cơ bản phần này tương tự Slide Option chỉ có khác cái này áp dụng cho toàn bộ show. Có khác một chút về phần Watermark là ***g một bức ảnh làm nền mờ. Một chú ý nữa là về Tab Sountrack cho phép bạn chỉnh file nhạc của show theo ý thích:
   
   
   Sau khi hoàn tất các bước để làm bây giờ bạn chích xuất nó ra dưới định dạng mà bạn muốn:
   
   

   Lần sửa cuối bởi Cry, ngày 02-09-2007 lúc 08:46 AM.

   Trả lời   Trả lời kèm Trích dẫn    Thanks  

5. The Following 15 Users Say Thank You to Cry For This Useful Post:

   amino49c2, chunga, Mediterraneo, nguahoang_levan, nguyenhuu43, philipst0nybi, Phoenix92, potw, Soicodon, SwimInBlueSky, tackehoa2301,WhatCanIdo?, xerana, xZoZox, zuckee1

6. 01-09-2007, 06:07 PM
   Cry

   Thành viên Softvnn
7. 10-09-2007, 06:23 PM#3

   
   

   Cry 

   Thành viên Softvnn
   

   Ngày tham gia

   Aug 2007

   Bài viết

   66

   Thanks

   83

   Thanked 112 Times in 13 Posts

   
   

   Phần III: Tự làm những hiệu ứng

   
   
   
   
   
   Phần này là sự kết hợp giữa Proshow Producer và Photoshop. Do Proshow Producer hỗ trợ tính trong suốt cho các file PSD do Photoshop tạo ra, hơn nữa Photoshop có khá nhiều Brush đẹp. Mình lấy ví dụ một số hiệu ứng như thế này: làm đỏ mặt người trong ảnh, các sao nhấp nháy lung linh như trên TV ấy… Mình sẽ hướng dẫn sơ qua để từ đó các bạn mặc sức sáng tạo ra những hiệu ứng cho riêng mình. Khi viết bài này mình rất băn khoăn không biết phải viết thế nào (bí lù), cuối cùng mình chỉ viết giới thiệu sơ sơ cách làm, vì hiệu ứng là rất nhiều tùy theo sự sáng tạo của mỗi người. Bài viết có hơi lủng củng các bạn chịu khó đọc vậy.
   
   
   A/ Chuẩn bị
   
   Bật Photoshop lên vào File>New hoặc ấn Ctrl+N hiện lên một bảng chọn như sau:
   
   
   
   Width, Height là kích cỡ của ảnh mới tùy từng trường hợp mà chọn cho nó, thường chọn số nhỏ.
   Bây giờ dùng Brush đặc biệt vẽ lên “New” vừa tạo (Chỉ vẽ một cái thôi):
   
   
   
   Trong hình mình lấy một cái Brush giống kiểu mặt trời, nhưng màu đỏ. Thông thường lấy là màu trắng nhưng mình lấy màu đỏ trong ví dụ cho dễ nhìn. Nhớ là khi Save không được đặt tên bức ảnh là tiếng Việt có dấu vì Proshow Producer sẽ không nhận đâu.
   Một chi tiết nữa là khi vẽ phải chọn Kích cỡ Bruh thật to
   Ngoài ra có thể cắt một chi tiết nào đó từ những bức ảnh có sẵn:
   
   
   
   B/ Làm
   Bây giờ bật Proshow Producer lên, kéo thả bức ảnh *.PSD vừa tạo và thiết lập các hiệu ứng cho nó. Ví dụ làm kiểu mặt trời soi sáng :
   
   
   
   Chọn kiểu chuyển động của “mặt trời” tùy ý bạn, chỉnh độ trắng và độ sáng cho thích hợp, chỉnh thời gian chuyển cảnh chuyển về 0s. Sau khi thiết lập bạn Save nó dưới dạng một Show của Proshow Producer đặt tên là hiệu ứng chẳng hạn, để sau này tiện cho việc ***g vào các show khác. Proshow Producer có chức năng Copy, khi cần ***g chỉ việc Copy Slide từ show hiệu ứng vào show cần ***g, kick đúp vào Slide sau khi Copy, trong Tab Layer bạn add ảnh cần ***g vào, nhớ là add thì phải để những Layer Photoshop ở trên cùng, còn ảnh cần ***g xuống dưới. Như vậy là show của bạn đã có hiệu ứng rồi mà không cần đến những soft khác, tuy các hiệu ứng chỉ là 2D ( 2 chiều).
   Một ví dụ khác là làm sao lấp láy chẳng hạn, thì dùng Brush có hình ngôi sao vẽ lên, cho nó lấp láy thì chèn nhiều lớp chuyển tiếp, chỉnh to nhỏ qua từng lớp, chỉnh độ trắng và độ sáng thích hợp, có thể cho nó hơi xoay đi một tý.
   Một VD nữa: Làm trái tim nhấp nháy
   
   
   
   
   Còn nhiều lắm, đến đây dành cho sức sáng tạo của các bạn. Nếu không sáng tạo được thì xem TV chịu khó để ý một chút sẽ có nhiều cái bạn có thể bắt chước được.  
   
   Để có một vài Brush đẹp vào trang WWW.BROWSE.DEVIANTART.COM rồi gõ Brush vào phần search có vô số những Brush đẹp :106:

   
   Tải phần mền click vô ngay PassUnlock: share24h.net

Giới thiệu

Hi tất cả các bạn..!
Đầu mình xin cùng có mời vài lời và ngắn gọn với bạn ít về nhưng gì có thể sang sẽ.Bạn hãy có ý nghĩ như mình.Chúng ta cùng nhau vượt qua những khó khăn....(cập nhật sau)