Discussion on Layouter - Your Portfolio in Awesome Layouts

ZoomIt

ZoomIt supports this item

Supported

This author's response time can be up to 2 business days.

6 comments found.

Looks promising.

Good luck with sales!

Thank you!

Great Work , GLWS :)

Thank you!

Nice work, GLWS! :)

Thank you!

useful script – great work ! :)

Thank you!

Is this for Wordpress or can it be used on an html/php site? Also, do the images have to be coded? Do you have a video that shows how this works possibly? Very interested, but I’m looking for a gallery that reads images from a directory if possible or is easy to code with good documentation.

It’s not for wordpress

We have wordpress version also

I don’t have a video but it’s very easy

You just need to add this to your html / php site

<div class="dzslayouter auto-init skin-loading-grey transition-fade hover-blackbox" style="" data-options="{prefferedclass: 'squares', settings_overwrite_margin: '2', settings_lazyload: 'on'}">
                    <ul class="the-items-feed">
                        <li data-link="#" data-src="img/l6_1_1.jpg">
                            <div class="feed-title">Citybreak <strong>Venetia</strong></div>
                        </li>
                        <li data-link="#" data-src="img/l6_1_4.jpg">
                            <div class="feed-title">Vacation <strong>Rhodos</strong></div>
                        </li>
                        <li data-link="#" data-src="img/l6_1_5.jpg">
                            <div class="feed-title">Tour <strong>Egypt</strong></div>
                        </li>
                        <li data-link="#" data-src="img/l6_1_2.jpg">
                            <div class="feed-title">Tour <strong>New York</strong></div>
                        </li>
                        <li data-link="#" data-src="img/l6_1_3.jpg">
                            <div class="feed-title">Circuit <strong>Creta</strong></div>
                        </li>
                        <li data-link="#" data-src="img/l7_1_1.jpg">
                            <div class="feed-title">Citybreak <strong>Roma</strong></div>
                        </li>
                    </ul>
                </div>

in the data-src are your images

and if you want to read a dir for images it’s easy in php
<div class="dzslayouter auto-init skin-loading-grey transition-fade hover-blackbox" style="" data-options="{prefferedclass: 'squares', settings_overwrite_margin: '2', settings_lazyload: 'on'}">
                    <ul class="the-items-feed">
                        <?php
$dir = '/dir'
if ($handle = opendir($dir)) {

    /* This is the correct way to loop over the directory. */
    while (false !== ($entry = readdir($handle))) {
        echo '<li data-link="#" data-src="'.$dir.'/'.$entry.'">
                        </li>';
    }

    closedir($handle);
}

?>
                    </ul>
                </div>

Thank you!

Hi I made a new layout and the result is: id 10_1 Class mixed1 margin 2 and where I need to install? Thank you

Hello

Follow the instructions in the readme

Include the necessary scripts

Then it’s easy

<div class="dzslayouter dzsparallaxer--target skin-loading-grey transition-fade" style="width: 101%; " data-options="{prefferedclass: 'mixed1', settings_overwrite_margin: '0'}">
<ul class="the-items-feed">
<li data-src="img/l7_1_1.jpg" />
<li data-src="img/l7_1_2.jpg" />
<li data-src="img/l7_1_3.jpg" />
<li data-src="img/l7_1_4.jpg" />
<li data-src="img/l7_1_5.jpg" />
<li data-src="img/l7_1_6.jpg" />
<li data-src="img/l7_1_7.jpg" />
</ul>
</div>

<script>
jQuery(document).ready(function($)){
dzslay_init('.dzslayouter', {init_each: true});
});
</script>
by
by
by
by
by
by