-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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
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?
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
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...
bootstrap is giving you very good way to make it
Asked: 2015-06-15 14:49:56 +0800
Seen: 22 times
Last updated: Jun 16 '15