Member Avatar for Garidius

Hello everyone,

Somebody could suggest me some good script that you have used (jquery or something) to embed within a div structure a multi album photo slideshow/gallery or some other way to do it.

I've seen some but they aren't multi album and one of them has that feature but is not free script.

Many thanks in advance

  • 2 Contributors
  • 4 Replies
  • 124 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Garidius

Dani AI

Generated

For the 600px framed gallery with a main image, thumbnail strip, prev/next and multiple albums (the layout described by ), the simplest reliable approach is to use a slider that supports a synced main view + thumbnail navigation and either create one instance per album or swap albums dynamically. The quick, proven choices are Slick (easy thumbnail-sync via asNavFor), Swiper (modern touch support and a thumbs module), or a gallery+lightbox combo (PhotoSwipe / Blueimp) if fullscreen viewing is required. The scripts posted by look like general downloads and may not match the multi-album, thumbnail-driven UI being asked for.

Example structure and initialization (Slick + jQuery). Place this inside a 600px container and include the plugin files before running the init code.

<div class="gallery">
  <div class="slider-for">
    <div><img src="images/large1.jpg" alt="Caption 1"></div>
    <div><img src="images/large2.jpg" alt="Caption 2"></div>
  </div>

  <div class="slider-nav">
    <div><img src="images/thumb1.jpg" alt=""></div>
    <div><img src="images/thumb2.jpg" alt=""></div>
  </div>
</div>

<style>
.gallery { width:600px; margin:0 auto; }
.slider-for img, .slider-nav img { display:block; width:100%; }
.slider-nav .slick-slide { cursor:pointer; }
</style>

<script>
function initGallery(){
  $('.slider-for').slick({ slidesToShow:1, slidesToScroll:1, arrows:true, asNavFor:'.slider-nav', lazyLoad:'ondemand' });
  $('.slider-nav').slick({ slidesToShow:5, slidesToScroll:1, asNavFor:'.slider-for', focusOnSelect:true });
}
$(initGallery);
</script>

Multi-album pattern: store album image lists (JSON or arrays). When switching albums, slick('unslick'), rebuild the .slider-for and .slider-nav markup, then call the init function again. This avoids multiple hidden instances and keeps memory use low.

Practical tips: lazy-load large photos, serve optimized thumbs (small files), include alt text and keyboard controls for accessibility, test on touch devices, and check plugin licenses for commercial use. If fast initial load is critical, load the first album inline and fetch others via AJAX on demand.

Member Avatar for eng.naguib

Member Avatar for Garidius

Hi eng.naguib,

Thanks for your reply.

But for what I'm seeing so far, I think the script you're sharing is not intended to be used for a photo gallery/photo album.

May somebody know another free script to do this?

Thanks in advance

Member Avatar for eng.naguib

Member Avatar for Garidius

Hey thanks again eng.naguib,

That looks great, but it seems doesn't have the feature of albums of photos.

I looking something like having the frame to see the current photo, below some thumbnails to select photo doing click on each one or with next and previous button and be able to insert all in a div of 600px of width.

Something like in the attached image.

Do you know some script similar to this?

Many thanks for help so far.

Regards

Album_Gallery.jpg 18.27 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.