LigthtBox In Pure JavaScript – BigPicture.js

BigPicture.js היא ספריית Javascript רספונסיבית (מותאמת למובייל) , נטולת CSS קלה ונוחה לשימוש המיועדת עבור הצגת וידאו ותמונות.
בין הפיצ'רים הכלולים נמנים גם הדברים הבאים:

תמיכה בתמונות מ Local Storage וכן מ Remote Storage.
הצגה של וידאו מיוטיוב, VIEMO ו HTML5.
קסטומיזציה של טריגרים ואירועים..
Content Loading Spinner

איך משתמשים?

הוסף הפניה לקובץ ה JS:

<script src="BigPicture.js"></script>

1	<script src="BigPicture.js"></script>

צור אובייקט מסוג BigPicture אותו תרצה להציג בעמוד שלך:

BigPicture({
  el: this,
  imgSrc: '1.jpg'
});

BigPicture({
  el: this,
  vidSrc: 'html5.mp4'
});

BigPicture({
  el: this,
  ytSrc: 'VIDEO ID HERE'
});

BigPicture({
  el: this,
  vimeoSrc: 'VIDEO ID HERE'
});

BigPicture({

el: this,

imgSrc: '1.jpg'

});

BigPicture({

el: this,

vidSrc: 'html5.mp4'

});

BigPicture({

el: this,

ytSrc: 'VIDEO ID HERE'

});

BigPicture({

el: this,

vimeoSrc: 'VIDEO ID HERE'

});

הצג/הסתר את תמונת הטעינה:

BigPicture({
  noLoader: false
});

BigPicture({

noLoader: false

});

אפשרויות לפונקציית Callback:

BigPicture({
  animationStart: function() {},
  animationEnd: function() {}
});

BigPicture({

animationStart: function() {},

animationEnd: function() {}

});

לאתר הבית של הפלאגין: https://github.com/henrygd/bigpicture

להורדת הספריה: https://github.com/henrygd/bigpicture/archive/master.zip

דמו ודוגמאות: https://henrygd.me/bigpicture/

Post Views: 1,017

Tech Blog

הבלוג שלך בנושאים טכניים, פיתוח ותשתיות

LigthtBox In Pure JavaScript – BigPicture.js

Be the first to comment

Leave a Reply לבטל