show my array of images on my js slider?

[lord_dupalski]

I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage.

but how do i call it one by one? for ex.

ignore the code for my first item it doesnt work

but how do i make my slider work? have 3 images uploded on a single image field called slider1

how do i call each of them , what is the code to be put on img src for each item

[kongondo]

foreach...

http://processwire.com/api/fieldtypes/images/

Please try to read the docs if you haven't done so already, thanks.

[Joss]

You use a similar procedure that I outline in the think I put up on your other post

http://processwire.com/docs/tutorials/galleries-short-and-long/page2

You will also find a long explanatory tutorial about images and how to work with them with php here:

http://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/

[lord_dupalski]

thanks for the link

$image = $page->images->first();

but can i just use  this code

like change the first() into

second()

third()

forth()

and so on?

[Martijn Geerts]

->eq(0) = the first image

->eq(1) = the second

->eq(2) = the third

... and so on

[lord_dupalski]

guys i get error with this can you help me?

i get error

[adrian]

But I don't think you want to call them individually - what if you decide to add a 4th image at some point - then you'd need to change your code to add: ->eq(3).

Best bet is to do what kongondo suggested:

foreach($page->slider1 as $img){
    echo "<div class='item'><img src='{$img->url}' /></div>";
}

[Martijn Geerts]

@dupalski, please follow the link/tutorial provided by Joss, there's a good explanation how to do.

[lord_dupalski]

im using kongodo link

tried them

problem is i cant incorporate it on my code above

[pwired]

Bumped against exactly the same case,

What I learned from the forum:

Get an image by it´s name from the current page.

$image = $page->images->get("name=image.jpg");

------------------------------

Get an image by it's name from any page

$temp = $pages->get("/page_that_holds_picture/");

$image = $temp->images->get("name=image.jpg");

$image = $image->width(200);

echo "<img src='$image->url'/>";

[kongondo]

foreach ($page->slider1 as $slider) {
  echo "<div class='item'> <img src='$slider->url' alt='$slider->description'> </div>";
}

This assumes that you have an image description for each of your images that you will use as you image alt attribute.

Also assumes that you are pulling images from the current page's image field named 'slider1'

Also assumes that you will do your homework and read up on how to check if images exist/found on a page before attempting to output them....

Apart from the 'alt', same as what Adrian posted above...

[Joss]

As a clue, with a single image you can check whether a value exists, in other words whether there is an image in it. With an array, the loop wont run if there is no array, so that wont create an error, but it gets more complicated if there are other fields in the loop.

You can read all the grisly details about 3/4 of the way down this page of my long, beginners tutorial

http://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/chapter-2-easy-images/page5

That will probably cover most of your questions.

[lord_dupalski]

am i coding this r ight guys?

this still doesnt work

it only works only if i remove div before the for each but the images all showed vertically not as a slider

[Joss]

Are you calling the owl slider?

You should have this on your page somewhere:

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel();
 
});

It sounds like your loop is working fine, so this is not a PW problem but possible an issue with initialising the script and so on.

Again, check the console in chrome to see if it is showing any JS errors.

[lord_dupalski]

yup there is

1. $(document).ready(function() {
2.  
3. $("#owl-demo").owlCarousel();
4.  
5. });

at the bottom of my code.

I think there is something wrong with my implementation of the loop?

can you see it? coz i really cant figure it out.

maybe something i miss with the quotes? its so hard

[lord_dupalski]

this is how i initialise them by the way all path seems correct

damn it im so stupidd! i found at the bottom that theres another js script i havent properly initialise with <?php echo $config->urls->templates?>

[Joss]

Does that mean it is working now?

By the way, unless there is a reason for everything to be up at the head, I would move your scripts to just before your </body> tag with the exception of modernizr.

Also, is owl carousel.js included in responsee.js? Ow do you need to include it separately - I don't know responsee.