0

Images slider

asked 2015-06-15 14:49:56 +0800

greendragon gravatar image greendragon
25 4

Hi everybody!!! I need to create an images slider but I've no idea how proceed. I have a variable number of images uploaded in a folder and I need to show the last uploaded image in a div. By previous and next buttons, user can navigate through the other images. I'm thinking to use a sort of paging list but I'm not sure this is a possible solution, and how to proceed to implement it. Can you help me? Very thanks

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
0

answered 2015-06-15 17:16:18 +0800

Darksu gravatar image Darksu
1991 1 4

Hello greendragon,

For starters you could reference the code of the following fiddle in order to help you with your task:

http://zkfiddle.org/sample/3m116ad/1-Simple-slide-with-lots-of-image#source-1

Best Regards,

Darksu

link publish delete flag offensive edit
0

answered 2015-06-16 08:42:21 +0800

greendragon gravatar image greendragon
25 4

Thanks Darksu but my problem is that the number of images is variable. User can upload images so I can't know how much images are in folder. For this reason I'm thinking to use something like a list and show the various element of the list. Is it possible to do it?

link publish delete flag offensive edit
0

answered 2015-06-16 09:17:16 +0800

Darksu gravatar image Darksu
1991 1 4

Hello greendragon,

If you check the code again you will see that it is very easy to modify it in order to incorporate your business logic (see method getContentList() )

Furthermore you will have to write a small method that will read the files from the upload directory dynamically as shown at the following post:

http://stackoverflow.com/questions/1844688/read-all-files-in-a-folder

If you still have issues please let me know and we will figure it out.

Best Regards,

Darksu

link publish delete flag offensive edit
0

answered 2015-06-16 09:54:56 +0800

greendragon gravatar image greendragon
25 4

updated 2015-06-16 11:50:19 +0800

Hi Darksu, my doubt is how change this part

<div id="container">
    <image id="imgOne" />
    <image id="imgTwo" />
    <image id="imgThree" />
</div>

without knowing how many images I have in folder... For example if I have only two images or more than 3 images...

I'm trying to do in this way:

    <div class="container-fluid"
        style="width: 250px; height: 250px; max-width: 250px; max-height: 250px;">
        <listbox model="@bind(addContentVM.imagesList)" height="250px" width="250px"
             selectedItem="@bind(addContentVM.currentImage)">
            <template name="model" var="mediaListModel">
                <listitem>
                    <listcell image="@load(addContentVM.currentImage)">
                    </listcell>
                </listitem>
            </template>
        </listbox>
   </div>

My java file is:

    public class AddContentVM {
            private BufferedImage currentImage; 
        private List<BufferedImage> imagesList = new ArrayList<BufferedImage>();

    @Command("doUpload")
    @NotifyChange("currentImage")
    public void doUpload( @ContextParam(ContextType.TRIGGER_EVENT) UploadEvent evt,
            @BindingParam("validationObj") SimpleForm form,
            @BindingParam("component") Textbox pathTxb,      
                    @ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) throws IOException{

        String fileName = evt.getMedia().getName();
        mediaContent = evt.getMedia();
        File file = new File( path + fileName );
        String imagePath = file.getAbsolutePath();

            if( !file.exists() )
            file.createNewFile();

        if( file.isFile() ){
            Files.copy(file, evt.getMedia().getStreamData());
        }

        String file250 = path250x250 + fileName;
        File preview = new File(file250);
        resize(imagePath, file250, 250, 250);

        currentImage = ImageIO.read(preview);
        imagesList.add(currentImage);
        int i = imagesList.size();
        }
}

But image doesn't appear in the div...

link publish delete flag offensive edit
0

answered 2015-06-16 10:40:36 +0800

kanse gravatar image kanse
1
http://www.jakoszczedzac....

bootstrap is giving you very good way to make it

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-06-15 14:49:56 +0800

Seen: 22 times

Last updated: Jun 16 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More