Reputation: 13248
I have a div container where I am displaying multiple images and now I need to display only one image and hide the rest of the images.
So how do I do that?
Here is my container:
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").plupload({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Final.aspx',
max_file_size: '10mb',
max_file_count: 25,
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
// resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// thumbnails
thumb: { width: 100, height: 100, quality: 90 },
// Flash settings
flash_swf_url: 'js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
alert('You must at least upload one file.');
return false;
});
var uploader = $('#uploader').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
});
});
Upvotes: 0
Views: 597
Reputation: 2726
Possibly something like:
$('#showfilelist div').hide(); // Hide all appended divs
$('#showfilelist div').eq(0).show(); // Show the first one
Upvotes: 1
Reputation: 717
I'd do something like this:
$(".thumb").hide();
$("#" + file.id).show();
(Where file.id is the id of the one image you want to be visible.)
If you just want to show the first thumb, do this:
$(".thumb").hide();
$(".thumb:first").show();
To show the last thumb, just use the ":last" selector instead of ":first".
Upvotes: 1