I work with jasny upload image preview plugin for bootstrap 3 But this does not work when preview image is empty. I need to show only no+image and select image button not empty div and change / remove button.
HTML:
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
<input type="hidden" name="myimage" value="1" />
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div> <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" />
</span> Remove
</div>
</div>
How to fix this Problem?
DEMO : http://jsfiddle.net/Sambora/Y7hGh/2/
If I understood correclty your issue, I think this is because you used fileupload-exists instead of fileinput-exists. So the mark-up for the preview container should be like this:
<div class="fileinput-preview fileinput-exists thumbnail"
style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
You need to change: fileinput-exists in your top line of code to fileinput-new in case of no preview image is provided.
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
To:
<div class="fileinput fileinput-new" data-provides="fileinput" data-name="myimage">
Related
how do i make image and image select and delete buttons reponsive
I want to remove the gap after delete button, any suggestion will be appreciated??
<div class="container mt-0">
<div class="row">
<div class="col-sm-12 col-md-3"><!--upload button-->
<span class=""></span>#wordInfo["SelectImage"]
</div>
<div class="col-sm-12 col-md-3 ms-md-5"><!--delete button-->
<button type="submit" class="btn btn-outline-primary float-lg-end mb-2 w-100 " id="#removeImageElementId" style="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? "display:none" : "")" onclick="javascript:removeImage('#(noImage)', '#imageElementId', '#hiddenElementId', '#removeImageElementId'); return false;"><span class=""></span>Delete image</button>
</div>
</div>
</div>
<div class="row mb-3 d-flex flex-column"><!---image-->
<div class="col-md-7 mt-3">
<img id="#imageElementId" class="img-fluid" alt="Responsive image" src="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? noImage : menuImagePath + Model.MenuForm.IMAGE_NAME)" onload="javascript:disiplayImage('#removeImageElementId', $(this).attr('src'),'#noImage') " />
<input type="hidden" id="#hiddenElementId" name="hdnImageName_1" value="#Model.MenuForm.IMAGE_NAME">
</div>
</div>
</div>
[![below is image][1]][1]
[1]: https://i.stack.imgur.com/uhJhl.png
Change your css as shown :
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
in your case:
#centre{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
replace centre with id of image in your html
I would like to get the parent id of the element that was click, so in this case either #logo200_60_form or #logo400_120_form. I can then use that id in the rest of the code.
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels. As the id is in
the click handler is there a way of determining which parent caused the click.
JS :
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput- exists').on('click', function() {
$('form').get(0).reset();
$('#logo200_60').trigger('change');
$('#logo200_60_thumb').attr('src', 'http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image');
});
HTML :
<form action="#" role="form" id="logo200_60_form">
<p>Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60">
</span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form">
<p>Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120">
</span>
Remove
</div>
</div>
</div>
</form>
Use closest() with attribute-value selector.
$(this) // The element that is clicked
.closest('form') // First <form> ancestor
.attr('id') // Get the value of `id` attribute
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels.
You could use .parents() instead, Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector :
$(this).parents('form').attr('id');
Hope this helps.
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput-exists').on('click', function() {
alert($(this).parents('form').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" role="form" id="logo200_60_form">
<p> Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60"
> </span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form" >
<p> Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120"
> </span>
Remove
</div>
</div>
</div>
</form>
This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/. Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/
-Thanks for the help!
<div class="div1">
</div>
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
your fiddle isn't loading for me, but based in this code it would be like this:
#sliderFrame {
position: relative;
width: 960px;
margin: 0px auto;
left: -30px;
}
where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like
<div class="slide_contain">
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
</div>
Now in your CSS, you add this:
.slide_contain {
position:relative;
width:960px;
height:auto;
min-height:300px
}
#sliderFrame {
position: absolute;
width: 960px;
margin: 0px auto;
left: -30px;
}
This method will allow you to have better control and avoid problems when moving the sliderFrame div
I am working on uploading an image, I have javascript completely working. My javascript have functionality like shown in this image.
Now, when I call the image from database it just show on the place of "no image" (Image preview) and do not show the "change" and "Remove" button. please suggest something.
and here is my HTML code which looks like this...
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width:96%; height: 150px;">
<img src="<?php if(isset($page->header_image)!= ""){echo $page->header_image;} else{ echo "http://www.placehold.it/280x150/EFEFEF/AAAAAA&text=no+image";} ?>" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100%; max-height: 150px; line-height: 20px;"><?php if(isset($page->header_image)!= ""){ echo "<img src='{$page->header_image}' />"; } ?></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span>
<input type="file" class="default" value="http://www.imafe.org/images/comext.jpg"/></span>
Remove
</div>
</div>
and my javascript is here. http://www.websiteeonline.com/bootstrap-fileupload.js
now when i call the image from database it just show on the place of "no image" (Image preview) and do not show the "change" and "Remove" button.
Is there any suggestion for this?
Thank you!
I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>
You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/