Image carousel in home page

293 Posts

il_dandi Reply #11, 15 years, 6 months ago

Thanks for your replies.

Suppose that I like this carousel:

http://nouincolor.com/floom/1.1/Demos/

or this:

http://nivo.dev7studios.com/demos/

How Can I make it working reading images from a specified folder?

Thanks

☆ A M B ☆
24,524 Posts

sottwell Reply #12, 15 years, 6 months ago

Write a snippet to read the folder using any of the PHP functions that will do this, and have the snippet output each filename into the HTML required. For example, the first one you link to has this:

<div id="blinds-cont">
		<div id="blinds">

			<!-- <img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="nature-photo0.jpg" />
			<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="nature-photo1.jpg" />
			<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="nature-photo2.jpg" />
			<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="nature-photo3.jpg" />
			<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="nature-photo4.jpg" /> -->
		</div>
	</div>

So you’ll want to have this HTML

<div id="blinds-cont">
		<div id="blinds">

			<!-- [[SnippetName? &folder=`folder1`]] -->
		</div>
	</div>

The snippet will be something like this:

<?php
$dir = "assets/images/".$folder;
$output = '';
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            if(filetype($dir.$file) == 'file') && $file != '.' && $file != '..')
            $info = pathinfo($file);
            $file_name =  basename($file,'.'.$info['extension']);
            $output .= '<img title="'.$file_name.'" alt="" src="'.$dir.$file'" />';
        }
        closedir($dh);
    }
}
return $output;
?>

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

293 Posts

il_dandi Reply #13, 15 years, 6 months ago

Greeeat!!!
Thank you .... so I’ve only create my HTML

<div id="blinds-cont">
<div id="blinds">


</div>
</div>

and use your snippet for read image

OK?

Thanks

293 Posts

il_dandi Reply #14, 15 years, 6 months ago

Quote from: il_dandi at Apr 15, 2011, 03:15 PM

Greeeat!!!
Thank you .... so I’ve only create my HTML

<div id="blinds-cont">
<div id="blinds">


</div>
</div>

and use your snippet for read image

OK?

Thanks

is it right what I’ve written ... I don’t know if this is the right way!

Thanks

863 Posts

Lucas Reply #15, 15 years, 6 months ago

What did you name your snippet when you saved it?
And what is the full path to your image folder?

293 Posts

il_dandi Reply #16, 15 years, 6 months ago

snippet name is "carousel"

all my carousel images are in:

assets/templates/my_template/carousel

863 Posts

Lucas Reply #17, 15 years, 6 months ago

So you need to change the snippet call to carousel

Also, the snippet is expecting your image folder to be under assets/images/. So move your ’carousel’ folder to assets/images/carousel/, then call it like this:

<div id="blinds-cont">
      <div id="blinds">

         <!-- [[carousel? &folder=`carousel`]] -->
      </div>
   </div>

293 Posts

il_dandi Reply #18, 15 years, 6 months ago

I’ve created this snippet

<?php
$dir = "assets/templates/mytemplage_v1/".$folder;
$output = ’’;
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if(filetype($dir.$file) == ’file’) && $file != ’.’ && $file != ’..’)
$info = pathinfo($file);
$file_name = basename($file,’.’.$info[’extension’]);
$output .= ’<img title="’.$file_name.’" alt="" src="’.$dir.$file’" />’;
}
closedir($dh);
}
}
return $output;

created my carousel folder in assets assets/templates/mytemplage_v1/

and inserted this HTML tag

But I show an empty page with this HTML sad

(((

another thing: why in your example do you use these div:

<div id="blinds-cont">
<div id="blinds">

Thanks

863 Posts

Lucas Reply #19, 15 years, 6 months ago

I only added those divs as those are what you had in your markup above.

You have this line in your snippet:

$dir = "assets/templates/mytemplage_v1/".$folder;

Which appends whatever you put in &folder=`` in your snippet call to the path in the snippet above. That’s useful if you intend to use this snippet more than once and for different folders.

So:
[[carousel? &folder=`carousel` ]] will point to assets/templates/mytemplage_v1/carousel/.
[[carousel? &folder=`` ]] will point to assets/templates/mytemplage_v1/

If you’re only going to use it once, just call it [[carousel]] and change the first line in your snippet to:

$dir = "assets/templates/mytemplage_v1/";

293 Posts

il_dandi Reply #20, 15 years, 5 months ago

Yes!! Is what I’ve done... but not working:

in my snippet I’ve

$dir = "assets/templates/myfolder_v1/".$folder;

in myfolder_v1 I’ve a "carousel" folder with all my images

in code I’ve inserted (on Revo)



Do I’ve to keep <!--?? (I’ve tried with or without HTML comments and doesn’t works)

I show an empty page when I insert this string in my HTML