WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Ken Burns Media Gallery / Slideshow

— Add-on เพื่อ WorldWideScripts.net

สมัครสมาชิกฟีด ของเรา จะอยู่ถึง วันที่ !

ใหม่! ติดตามเรา ตามที่คุณต้องการ!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress รุ่น

แกลลอรี่สนับสนุนภาพ, วิดีโอ, เสียงโทรศัพท์แบบอินไลน์การติดตั้ง iPad นาทีที่รองรับเคนเบิร์นผลนำทางภาพขนาดเล็กและอื่น ๆ!

อัพเดท

UPDATE 2 0.1 [14/06/2011]

  • เพิ่มตัวอย่างเช่น autoheight + เรียก API

UPDATE 2 0.0 [2011/09/06]

  • ข้อบกพร่องคงที่
  • แบรนฟีนิกซ์แกลอรี่ - คุณสมบัติเดียวกันแกลเลอรี่ + เพิ่มเติม
  • เพิ่มระบบนำทางรูปขนาดย่อ

บทนำ

jQuery เคนเบิร์น Slideshowis วิธีที่สมบูรณ์แบบที่จะแสดงภาพของคุณ / โฆษณาในรูปแบบ แต่ละรายการมีเวลาสไลด์โชว์แยกต่างหากและคุณสามารถแก้ไขการเชื่อมโยงของพวกเขาและการตั้งค่าเป้าหมายของแต่ละบุคคลหลายคนอื่น ๆ เพียงแค่โดยการปรับเปลี่ยนรูปแบบ HTML

คุณลักษณะเด่น

  • สนับสนุน.PNGs,.JPGs,.GIFs
  • API - โทรหยุดเล่น gotoNext, gotoPrev จาก html ของคุณ (นอกแกลเลอรี่)
  • autoheight - ตัวเลือกที่จะ AutoSize แกลเลอรี่ขึ้นอยู่กับความสูงของเนื้อหา
  • สนับสนุนรายการที่ไม่ จำกัด - หมุนภาพได้มากเท่าที่คุณต้องการ
  • โหมดสไลด์โชว์ - มีเวลาอิสระสำหรับแต่ละรายการที่คุณสามารถกำหนดใน HTML ให้
  • ค่าที่คุณสามารถตั้งค่าสำหรับแต่ละรายการ - คำอธิบาย (คำอธิบายจากด้านบน) initialZoom (ค่าใด ๆ ที่คุณต้องการ) finalZoom, slideshowTime (เวลาโรซาลีแบนเนอร์ยังคงมุ่งเน้นไปที่รายการเฉพาะ), การเผาไหม้เวลาที่มีผลบังคับใช้ (เวลาที่คุณ หวังว่าผลที่จะใช้) สมาชิก (ถ้าไม่มี URL ที่มีการตั้งค่ารายการที่จะเป็นเพียงภาพที่มีการเชื่อมโยงใด ๆ ต่อคลิก), transitionType (easeInSine เชิงเส้น ฯลฯ ) initialposition ตำแหน่งสุดท้าย (เลือกจาก topleft, topcenter, รายนามสมาชิก, middleleft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • ปรับขนาดได้ขนาดที่คุณต้องการ - เนื้อหาทั้งหมดจะวางตำแหน่งที่เหมาะสม

ปรากฎว่าตำแหน่งที่เป็นไปได้ (ครั้งแรกและครั้งสุดท้าย)

คำถามที่พบบ่อย

วิธีการกำหนดจำนวนของภาพขนาดเล็กที่ฉันมีภาพแนวนี้ในการเลื่อน.. การนำทางจะแสดงเฉพาะ 2 ของพวกเขาในขณะที่มีพื้นที่สำหรับ 4?

คุณไม่สามารถกำหนดจำนวนของภาพขนาดเล็กที่แสดงต่อ 'หน้า' เพราะมันคำนวณโดยอัตโนมัติจากความกว้างของนิ้วหัวแม่มือ / ความสูงและพื้นที่ที่นิ้วหัวแม่มือ เพื่อพยายามที่จะลดลงที่นิ้วหัวแม่มือมากขึ้น นอกจากนี้ยังมีอีกพารามิเตอร์ "nav_arrow_size: 40" - นี้เป็นพื้นที่ที่มีการปันส่วนสำหรับแต่ละลูกศร (เพื่อให้เริ่มต้นที่ 80 px จะ substracted สำหรับลูกศร) และคุณยังสามารถลดนี้ได้มากขึ้นนิ้วหัวแม่มือ

มันเป็นไปได้ที่จะนำการเชื่อมโยงบนภาพ (ภาพหลัก offcourse ไม่ได้ภาพขนาดเล็ก) ใช่แน่ใจว่าเขียน

 <a href="#"> <img src = "img / def1.jpg" /> </a> 

แทน

 <img src = "img / def1.jpg" /> 

ฉันพยายามที่จะเพิ่มการเชื่อมโยงในรายละเอียด แต่จะแบ่งสคริปต์

propably ที่คุณกำลังทำอะไรเช่นนี้

BAD:

 ข้อมูลรายละเอียด = "การเชื่อมโยงของฉันคือ <a href="http://something"> นี่ </a>" 

ปัญหาคือว่า "href ภายในแบ่ง" จากข้อมูลคำอธิบาย การแก้ปัญหาคือการใช้ 'แทน "

ที่ดี:
 ข้อมูลรายละเอียด = 'การเชื่อมโยงของฉันคือ <a href="http://something"> นี่ </a>' 
สวัสดี ฉันจะหยุดอัตโนมัติเลื่อน phoenixgallery

ที่คุณมีในพารามิเตอร์

 targetgallery.phoenixgallery ({ transition_type "สุ่ม" nav_type "thumbsa" nav_position "ขึ้น" thumb_width: 100 thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40 settings_shadow: "ปิด", settings_autoresize: "ปิด", settings_autoheight: "ปิด", settings_pauseonrollover: "ปิด", settings_usethumbarrows: 'ปิด', transition_strips_x: 10 transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0.3 thumbs_normal_alpha: 1, thumbs_roll_alpha: 0.3 }) 
ปิดการใช้งานสไลด์โชว์เพียงแค่เพิ่ม settings_slideshow พารามิเตอร์ใหม่และตั้งค่าให้ออกเช่นนี้
 targetgallery.phoenixgallery ({ transition_type "สุ่ม" nav_type "thumbsa" nav_position "ขึ้น" thumb_width: 100 thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40 settings_shadow: "ปิด", settings_autoresize: "ปิด", settings_autoheight: "ปิด", settings_slideshow: "ปิด", settings_pauseonrollover: "ปิด", settings_usethumbarrows: 'ปิด', transition_strips_x: 10 transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0.3 thumbs_normal_alpha: 1, thumbs_roll_alpha: 0.3 }) 
ด้วยเหตุผลบางอย่างเมื่อผมเพิ่มลิงค์ไปยังภาพที่มีผลบังคับใช้ฟังก์ชั่นซูมไม่

นั่นเป็นเพราะลักษณะข้อมูล initialZoom, ข้อมูล finalZoom, ข้อมูล effectTime ฯลฯ จะต้องอยู่กับเด็กโดยตรงของ div แกลเลอรี่ ตัวอย่างเช่นถ้าคุณมี

 

ผลจะทำงาน แต่ถ้าคุณเพิ่มการเชื่อมโยงเช่นนี้
 <a href="#"> </a> 
ผลกระทบจะไม่ทำงาน คุณจำเป็นต้องย้ายคุณลักษณะกับเด็กโดยตรงของแกลเลอรี่ชอบโดย:
 <a href="#" data-finalzoom="2"> </a> 

เครดิต

ภาพความคิดสร้างสรรค์ - http://www.flickr.com/photos/markjsebastian/

ดาวน์โหลด
ส่วนประกอบอื่น ๆ ในประเภทนี้ส่วนประกอบทั้งหมดของ ผู้เขียนคนนี้
ความเห็นคำถามที่พบบ่อย และคำตอบ

คุณสมบัติ

ที่สร้าง:
2 สิงหาคม 10

การปรับปรุงครั้งล่าสุด:
N / A

เบราว์เซอร์ที่เข้ากันได้:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

รวมไฟล์:
JS JavaScript, HTML, CSS

ซอฟแวร์เวอร์ชั่น:
jQuery

คำหลัก

อีคอมเมิร์ซ, อีคอมเมิร์ซ, สิ่งของทั้งหมด, ลูกศร, นำทางที่กำหนดเอง, ผลกระทบ, แกลเลอรี่, ภาพ, เคนเบิร์น, ตัวเลข, กระทะ, สนับสนุนภาพ, โรซาลี, สไลด์โชว์, รูปขนาดย่อ, เปลี่ยน, สนับสนุนวิดีโอ, ซูม