How to insert our picture ?

[mshahmirkhan]

I am try to create a gallery and I found this gallery best for my task but I'm facing some difficulties that how i'm going to change the picture .i want to put my own pictures overly

[blueimp]

Hi @mshahmirkhan, the setup guide has a section that shows you how to add your own pictures:

Create a list of links to image files, optionally with enclosed thumbnails and add them to the body of your webpage, before including the Gallery script:

<div id="links">
  <a href="images/banana.jpg" title="Banana">
    <img src="images/thumbnails/banana.jpg" alt="Banana" />
  </a>
  <a href="images/apple.jpg" title="Apple">
    <img src="images/thumbnails/apple.jpg" alt="Apple" />
  </a>
  <a href="images/orange.jpg" title="Orange">
    <img src="images/thumbnails/orange.jpg" alt="Orange" />
  </a>
</div>

Add the following JavaScript code after including the Gallery script, to display the images in the Gallery lightbox on click of the links:

<script>
  document.getElementById('links').onclick = function (event) {
    event = event || window.event
    var target = event.target || event.srcElement,
      link = target.src ? target.parentNode : target,
      options = { index: link, event: event },
      links = this.getElementsByTagName('a')
    blueimp.Gallery(links, options)
  }
</script>

So all you need to do is create a list of HTML link elements, how you create them is up to you. Can be static HTML, or generated server-side.