How to add gallery images.

Support › Forums › White – HTML Template › How to add gallery images.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 20, 2016 at 8:16 am #5482
    Dakota Barron
    Participant

    Hello. I don’t know how to go about adding gallery elements with multiple images to the work page. It is not in the documentation.

    Please advise?

    September 21, 2016 at 9:45 pm #5492
    CreaboxThemes
    Keymaster

    Hi Dakota,

    if you want to add a gallery item you have to add the next code within the gallery section:

    <div class="item photo">
     <img class="css3Animate" src="http://placehold.it/800x440&text=Gallery" alt="" />
     <div class="item-content css3Animate">
          <a href="http://placehold.it/800x440&text=Image" class="css3Animate portfolio-gallery" title="">
               <h4 class="css3Animate">GALLERY EXAMPLE</h4>
               <p class="css3Animate">The awesome project description</p>
          </a>
     </div>
</div>

    In the first image element you have to set up the image, video or work page you want to load in the attribute href.

    Remember to set up the correct class value. I mean, for an image is the class portfolio-popup, for a video is the class portfolio-youtube or portfolio-vimeo, and for add a gallery element is the class portfolio-gallery.

    Regards

    September 22, 2016 at 12:11 pm #5493
    Dakota Barron
    Participant

    Hello,

    Yes I understand how to add a gallery object, but how do I add multiple images to a gallery?

    For example, what would the code look like for a gallery with 3 images in it?

    Thank you,

    Dakota

    September 24, 2016 at 7:50 am #5498
    CreaboxThemes
    Keymaster

    Hi Dakota,

    sorry but that is not possible. You can only add one image for each gallery element. Really, each gallery object that you can add is one image of the whole gallery.

    Regards

    March 16, 2018 at 1:57 am #6040
    Mulchio
    Participant

    hi Dakota.
    I was trying the same and it helped understanding that the gallery takes images from the ‘pool’. Having that said i was able to create a work-around. Thus now i have two separate galleries with different images, which is if i am correct what you are trying to do.

    #1. In your custom.js file you can add code for a second gallery (portfolio-gallery2) as such:

    
$('.portfolio-gallery2').magnificPopup({
		type: 'image',
		removalDelay: 500, //delay removal by X to allow out-animation
		callbacks: {
		beforeOpen: function() {
			   this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
			   this.st.mainClass = 'mfp-zoom-in';
			}
		},
		gallery: {
			enabled: true 
		},
		closeOnContentClick: true,
		fixedContentPos: false
	});

    For clarity i put this in around line 320, right underneath the code for the first gallery.

    #2. Netx, in your index.html file you can then refer to that second gallery (portfolio-gallery2):

    <a href="images/work/image4.jpg" class="css3Animate portfolio-gallery2" title="">
<h4 class="css3Animate">ANOTHER GALLERY</h4>
<p class="css3Animate">The awesome project description</p>
<a href="images/work/image5.jpg" class="css3Animate portfolio-gallery2" title="">
<a href="images/work/image6.jpg" class="css3Animate portfolio-gallery2" title="">
</a>

    #3. Finally, note how i had to put the project name and description underneath the first image, not at the bottom, to ensure it would show up on rollover in the grid.

    Hope this helps.

    March 16, 2018 at 3:14 pm #6044
    CreaboxThemes
    Keymaster

    Thanks for your contribution Mulchio. I will consider it in the next update.

    Regards

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.