• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Hire Jordan Smith

  • About
  • Portfolio
    ▼
    • Web Design
    • Logo Design
  • Services
    ▼
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
    • Local Services
      ▼
      • Pooler
      • Richmond Hill
      • Hilton Head
      • Hinesville
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • About
  • Portfolio
    • Web Design
    • Logo Design
  • Services
    • All Services
    • Web Design
    • Logo Design
    • SEO Services
    • Web Hosting
    • Local Services
      • Pooler
      • Richmond Hill
      • Hilton Head
      • Hinesville
  • Reviews
  • FAQ
  • Blog
  • Hire Me
HomeBlog Web DevelopmentWordPress DevelopmentHow to show images and iframe video in Magnific Popup Gallery
how-to-show-images-and-iframe-video-

How to show images and iframe video in Magnific Popup Gallery

Share
Tweet
Share
Pin
0 Shares

A quick way to show images and iframe video in a Magnific Popup Gallery.

jQuery(document).ready(function($) {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
/*titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}*/
},
callbacks: {
elementParse: function(item) {
// the class name
if(item.el.context.className == 'video-link') {
item.type = 'iframe';
} else {
item.type = 'image';
}
}
},
});
});
view raw magnific-popup-gallery-image-plus-video.js hosted with ❤ by GitHub
Share
Tweet
Share
Pin
0 Shares

Check Out These Related Articles!

  • how-to-integrate-youtube-iframe-api-
    How to integrate Youtube Iframe API with WordPress Shortcode API

    In this tutorial, I will show you how to integrate the Youtube Iframe API with the WordPress Shortcode API to create a shortcode which is able to display a Youtube…

  • how-to-load-a-popup-
    How to load a popup on page load for a specific query string with PHP

    This was my solution to loading a popup on a specific query string using PHP. To accomplish this I used Magnific Popup for the popup / lightbox functionality so this snippet assumes…

hjs-avatar-color

Jordan

Owner

Jordan is a web design, developer and SEO based in Savannah, GA. He believes in providing honest and reliable web design services to businesses of any size. Regardless of the size of the project, he seeks to provide consistent quality. Jordan is an Army veteran and is proud to have served his country. He is husband to a beautiful, Godly woman, Megan and father to four beautiful girls: Kaysie, Kinley, Kylee and Katy.

Read More

Follow Jordan: Facebook Twitter

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Jordan Smith

Hi, I’m Jordan! I design and build quality websites for businesses in Savannah, GA and all over the United States. I have many years of experience producing professional sites for businesses of all shapes and sizes in Savannah and all over the United States.

Now that we’re acquainted, check out my portfolio to view some of my work, learn more about my philosophy or if you’re ready to get started, contact me now to discuss your project!

Popular Articles

Need Quality Website Design? Top Tips Every Business Owner Should Know308 Total Shares
Does Your Web Design Have More Problems Than Visitors? Top 10 Signs Your Site Needs An Overhaul276 Total Shares
8 Web Design Trends That Are Emerging in 2019242 Total Shares
How Quick Do Businesses Recoup the Average Website Cost?223 Total Shares
Top 10 Website Design Mistakes to Avoid212 Total Shares
12 Worst Website Design Mistakes for 2019 – Even The Pros Are Making These!202 Total Shares
Web Design and Seo 101: How Your Company Can Delight Customers and Keep Them Coming Back190 Total Shares
How to Use Web Design for Local SEO Optimization181 Total Shares
The Intertwined Roles of Web Design and SEO178 Total Shares
How Much Does It Cost to Build a Website? The Difference Between Overpaying and Underpaying156 Total Shares

Categories

  • Blogging
  • Marketing
  • SEO
  • Web Design
  • Web Development
    • ACF Development
    • BX Slider
    • Genesis Development
    • Gravity Forms Development
    • jQuery Development
    • Materialize Development
    • WooCommerce Development
    • WordPress Development
  • Web Hosting
Quick Connect

Phone
912-656-6434

Email
jordan@hirejordansmith.com

Address
Hire Jordan Smith, LLC.
580 White Oak Lane
Richmond Hill, GA 31324

  • Facebook
  • Twitter
  • Linkedin
  • Google
  • About
  • Portfolio
  • Services
  • Reviews
  • FAQ
  • Blog
  • Hire Me
  • Sitemap

© 2019 Hire Jordan Smith