Need to add Photo Gallery

[Dayanand Tiwari，修改在6 年前。]

Hi,
I want add a photo gallery. Created a structure which has document and media and it has nested field as document and media. Now I need freemarker template code to achieve the same.

[Massimo Bevilacqua，修改在6 年前。]

Hi,

which version of liferay do you use?
could you please post your structure code?

[Dayanand Tiwari，修改在6 年前。]

Liferay 7 CE. Structure is simple text with image making text as repeatable where image is child and template has just iterating images. And I'm beginner for WCM.

[Massimo Bevilacqua，修改在6 年前。]

I hope I have understand...
This is my structure:



this is my template:

<#if title.getSiblings()?has_content>
<div class="container">
    <div class="row">
    	&lt;#list title.getSiblings() as cur_title&gt;
    	<div class="col-sm-4">
    		${cur_title.getData()}
    		<img src="${cur_title.image.getData()}">
    	</div>
    	<!--#list-->
    </div>
</div>
<!--#if-->

this is my Web Content:



And that is the result (adjust div and css as you wish)

[Dayanand Tiwari，修改在6 年前。]

Yes, you are correct. But I want images as below:
http://www.mrmwr.gov.om/new/en/PhotoGallery.aspx?li=6&Slide=true

if you click on one image, a popup comes up and it has a slider so that next and previous images can be shown. Same thing I want to add.

[Massimo Bevilacqua，修改在6 年前。]

Once you have retrived the images you have to create your own Template or ADT to display it as you want

try to use this...

image-viewer

example of template using image viewer:

<#if title.getSiblings()?has_content>
<div id="myGallery">
&lt;#list title.getSiblings() as cur_title&gt;
    <a href="${cur_title.image.getData()}" title="${cur_title.getData()}">
    <img class="picture" src="${cur_title.image.getData()}">
  </a>
<!--#list-->
</div>
<!--#if-->

<script>
YUI().use(
  'aui-image-viewer',
  function(Y) {
    new Y.ImageViewer(
      {
        links: '#myGallery a',
        zIndex: 1,
        playing: false
      }
    ).render();
  }
);
</script>

[Dayanand Tiwari，修改在6 年前。]

yes but can we do it like:
http://www.mrmwr.gov.om/new/en/PhotoGallery.aspx?li=6&Slide=true

here if you click one image popup comes up with slider.

[Massimo Bevilacqua，修改在6 年前。]

Also in my example if you click one image a pop up comes up with slider

[Dayanand Tiwari，修改在6 年前。]

But Background content is also coming in the popup. Do you have any idea to remove them:

Look at the attachment: