contentgallery Buy Now$19

Content Gallery

This is an advanced image gallery script built on the JavaScript native. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

It takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

Style 1

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="right" captionOn="hover" skin="style1"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • <h2>THE MOST REALISTIC 3D</h2>
<h4>Full HD Smart LED LCD TV on the market</h4><br>
<section style="display: flex;align-items: center;justify-content:space-around;">
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-3d"><path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg><h4>3D</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bluetooth"><path d="m7 7 10 10-5 5V2l5 5L7 17"/></svg><h4>Bluetooth</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg><h4>Camera</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg><h4>CPU</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="m16 19 2 2 4-4"/></svg><h4>Mail</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-usb"><circle cx="10" cy="7" r="1"/><circle cx="4" cy="20" r="1"/><path d="M4.7 19.3 19 5"/><path d="m21 3-3 1 2 2Z"/><path d="M9.26 7.68 5 12l2 5"/><path d="m10 14 5 2 3.5-3.5"/><path d="m18 12 1-1 1 1-1 1Z"/></svg><h4>Micro USB</h4></div>
</section><br>
<button class="btn" style="padding:10px;margin: 0 auto;width: 9em;display: block;background: #ec9a44;border: 0;">VIEW DETAIL</button>
  • <h2>THE MOST REALISTIC 3D</h2>
<h4>Full HD Smart LED LCD TV on the market</h4><br>
<section style="display: flex;align-items: center;justify-content:space-around;">
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-3d"><path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg><h4>3D</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bluetooth"><path d="m7 7 10 10-5 5V2l5 5L7 17"/></svg><h4>Bluetooth</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg><h4>Camera</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg><h4>CPU</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="m16 19 2 2 4-4"/></svg><h4>Mail</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-usb"><circle cx="10" cy="7" r="1"/><circle cx="4" cy="20" r="1"/><path d="M4.7 19.3 19 5"/><path d="m21 3-3 1 2 2Z"/><path d="M9.26 7.68 5 12l2 5"/><path d="m10 14 5 2 3.5-3.5"/><path d="m18 12 1-1 1 1-1 1Z"/></svg><h4>Micro USB</h4></div>
</section><br>
<button class="btn" style="padding:10px;margin: 0 auto;width: 9em;display: block;background: #ec9a44;border: 0;">VIEW DETAIL</button>
  • <h2>THE MOST REALISTIC 3D</h2>
<h4>Full HD Smart LED LCD TV on the market</h4><br>
<section style="display: flex;align-items: center;justify-content:space-around;">
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-3d"><path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg><h4>3D</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bluetooth"><path d="m7 7 10 10-5 5V2l5 5L7 17"/></svg><h4>Bluetooth</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg><h4>Camera</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg><h4>CPU</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="m16 19 2 2 4-4"/></svg><h4>Mail</h4></div>
<div style="text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-usb"><circle cx="10" cy="7" r="1"/><circle cx="4" cy="20" r="1"/><path d="M4.7 19.3 19 5"/><path d="m21 3-3 1 2 2Z"/><path d="M9.26 7.68 5 12l2 5"/><path d="m10 14 5 2 3.5-3.5"/><path d="m18 12 1-1 1 1-1 1Z"/></svg><h4>Micro USB</h4></div>
</section><br>
<button class="btn" style="padding:10px;margin: 0 auto;width: 9em;display: block;background: #ec9a44;border: 0;">VIEW DETAIL</button>



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Style 2

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="none" captionOn="expand" skin="style2"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • <div style="text-align:center"><h3>You can insert some video to the description and visitors of your website will see this video after click on icon. Actually you can insert here more text or more videos, it is up to you.</h3><br><video width="600" controls src="../ba-video/videos/1.mp4"></video></div>
  • <div style="text-align:center"><h3>You can insert some video to the description and visitors of your website will see this video after click on icon. Actually you can insert here more text or more videos, it is up to you.</h3><br><video width="600" controls src="../ba-video/videos/1.mp4"></video></div>
  • <div style="text-align:center"><h3>You can insert some video to the description and visitors of your website will see this video after click on icon. Actually you can insert here more text or more videos, it is up to you.</h3><br><video width="600" controls src="../ba-video/videos/1.mp4"></video></div>

Style 3

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="right" captionOn="hover" skin="style3"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit vulputate venenatis. In tincidunt bibendum ex, tincidunt tristique felis eleifend at.
  • Nullam feugiat risus ut sapien semper faucibus ornare et mauris. Fusce ut purus feugiat, condimentum lorem sit amet, semper nisi. Fusce blandit ut nibh eu pellentesque.
  • Suspendisse tincidunt ut lacus at mollis. Nam eget imperdiet neque, sed interdum nunc.
  • Pellentesque molestie, libero eget laoreet suscipit, turpis nibh consectetur nibh, ut efficitur neque neque eget ante. Suspendisse at efficitur metus.
  • Aliquam mattis imperdiet risus, ac aliquam purus luctus non. Sed maximus nisi libero, et fermentum diam efficitur quis.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Style 4

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="left" captionOn="hover" skin="style4"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit vulputate venenatis. In tincidunt bibendum ex, tincidunt tristique felis eleifend at.
  • Nullam feugiat risus ut sapien semper faucibus ornare et mauris. Fusce ut purus feugiat, condimentum lorem sit amet, semper nisi. Fusce blandit ut nibh eu pellentesque.
  • Suspendisse tincidunt ut lacus at mollis. Nam eget imperdiet neque, sed interdum nunc.
  • Pellentesque molestie, libero eget laoreet suscipit, turpis nibh consectetur nibh, ut efficitur neque neque eget ante. Suspendisse at efficitur metus.
  • Aliquam mattis imperdiet risus, ac aliquam purus luctus non. Sed maximus nisi libero, et fermentum diam efficitur quis.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Style 5

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="right" captionOn="hover" skin="style5"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit vulputate venenatis. In tincidunt bibendum ex, tincidunt tristique felis eleifend at.
  • Nullam feugiat risus ut sapien semper faucibus ornare et mauris. Fusce ut purus feugiat, condimentum lorem sit amet, semper nisi. Fusce blandit ut nibh eu pellentesque.
  • Suspendisse tincidunt ut lacus at mollis. Nam eget imperdiet neque, sed interdum nunc.
  • Pellentesque molestie, libero eget laoreet suscipit, turpis nibh consectetur nibh, ut efficitur neque neque eget ante. Suspendisse at efficitur metus.
  • Aliquam mattis imperdiet risus, ac aliquam purus luctus non. Sed maximus nisi libero, et fermentum diam efficitur quis.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Style 6

Shortcode:

[bac_gallery src="folder" captions="Caption1; Caption2" direction="left" captionOn="alway" skin="style6"]

src => Image folder or image list "1.png; 2.png; 3.png"

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit vulputate venenatis. In tincidunt bibendum ex, tincidunt tristique felis eleifend at.
  • Nullam feugiat risus ut sapien semper faucibus ornare et mauris. Fusce ut purus feugiat, condimentum lorem sit amet, semper nisi. Fusce blandit ut nibh eu pellentesque.
  • Suspendisse tincidunt ut lacus at mollis. Nam eget imperdiet neque, sed interdum nunc.
  • Pellentesque molestie, libero eget laoreet suscipit, turpis nibh consectetur nibh, ut efficitur neque neque eget ante. Suspendisse at efficitur metus.
  • Aliquam mattis imperdiet risus, ac aliquam purus luctus non. Sed maximus nisi libero, et fermentum diam efficitur quis.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.