I have an image gallery containing Add image, Add video, and description fields. After adding the image, I have a button on the top right with these functions: Replace the image, Adjust/crop, Delete, Add Description, and Delete Description that is shown in the attached image. Add Image function is working well, but I don't have an idea about the rest of the sections that replace image, crop, and etc.
Can someone help me to find out the solution or does someone have a reference like this?
<div class="blog-box">
<div class="c-share">
<input class="c-share__input" type="checkbox" id="checkbox5">
<label class="c-share__toggler" for="checkbox5">
<span class="c-share__icon"></span>
</label>
<ul class="c-share_options">
<li><img src="images/icon/replace-icon.png" class="mr-5">Replace Image</li>
<li><img src="images/icon/crop-icon.png" class="mr-5">Adjust / Crop</li>
<li><img src="images/icon/delete-icon.png" class="mr-5">Delete</li>
<li><img src="images/icon/add-description-icon.png" class="mr-5">Add Description</li>
<li><img src="images/icon/add-description-icon.png" class="mr-5">Delete Description</li>
</ul>
</div>
<div class="tile">
<div class="flip-card-3D-wrapper">
<div id="flip-card">
<div class="flip-card-front">
<div class="img-wrap">
<div class="cropme" id="landscape" style="width: 350px; height: 400px;"></div>
</div>
<button id="flip-card-btn-turn-to-back">Add Video</button>
<textarea name="form_message" class="form-control required border-r-none ht-gallery-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
<div class="flip-card-back"><div class="inner">
<div class="description">
<p><strong>Note:</strong> Click here to see how to find embedded video url</p>
<input type="text" required="" placeholder="Paste Embedded Video Url Here" name="gmap" class="form-control allow_only_alphabet space video-url-new">
<textarea name="form_message" class="form-control required border-r-none add-des-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
</div>
<img src="images/return-btn.png" id="flip-card-btn-turn-to-front" class="return-btn-bg"></div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
I dont know what js framework you are using, or if any of your backend stuff. but this jquery solution might help you:
Not able to replace the image in the place of old image using javascript
there is a link there to a snippet where he made a image replacer that allows you to crop the image before replacing. its not working perfectly, but maybe you can work with it.
I would change it to take image URLs tho.
because then for delete, it could be done with a button that sets the src of the img-tag to blank.
<div id='imagediv'>
</div>
<button onclick="myFunction()">Delete</button>
var html = "<img src='"+ link +"' >"
var link = "urltoimage.com/picture.jpg"
function myFunction() {
link = "path to blank image"
document.getElementById("imageDiv").innerHTML = html;
}
i havent tested this, and its not the most amazing way of doing things, but i hope its of some help :)
Related
I encountered this problem while making an online shopping mall page.
Most of the photos uploaded to my db have different sizes and I had to resize them all. But when I did, some of the pictures' resolutions became really bad when I set all of their height the same.
I wanna add something like an if clause that determines size of the image then resizes only the images which are bigger than the given size.
I want to add something looks like this, I guess:
if (img height < 300px) {
img height = "100px";
} else {
img height = "400px";
}
Here's my current code:
<ul class="prdList column4">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" />
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" />
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
</ul>
</div>
I want to add something looks like this, I guess:
if (img height < 300px) {
img height = "100px";
} else {
img height = "400px";
}
You guess it right.
You just need to find the functions to detect and change image size.
Where to find these functions
First check the function reference in official PHP manual.
Then you will find a dedicated section on image processing:
Image Processing and Generation
It turns out that several libraries provide required functions.
For example, if you are using GD, it offers getimagesize and imagescale.
Gmagick and ImageMagick have similar functions, just with different names.
I have made a search bar that I want to show when user will click on search image that is list item as
<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>
I set the visibility to hidden in HTML as
<div id="bar_search" style="visibility:hidden;">
have a function as
function showSearch () {
document.getElementById("bar_search").style.visibility = "visible";
}
but when i click on list item it does not show however hidden property working fine.
where I'm making mistake please tell me, thanks
Update:
content in the div
<div id="bar_search" style="visibility:hidden;">
<img id="searchbar" src="images/searchBar.png">
<div id="searchDec">
<input type="text">
<button ><b>Search</b></button>
</div>
</div>
Try setting the property through your style sheet and see if you can't get it to change with the event-handler.
<node class="hidden" onclick=toggleVisibilty()"></node>
Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.
http://api.jquery.com/toggle/
your code is fine maybe you have syntax error in the same page
function showSearch() {
document.getElementById("bar_search").style.visibility = "visible";
}
<li class="item" onclick="showSearch()">
<img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
<img id="search" src="http://i.stack.imgur.com/X6BXa.png">
</div>
I want to display all select option values on screen. One way I have brainstorm is the following:
<select size="4">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
The problem I have with that is that yes all is displayed, but none of them are clicable. I would want that when one of them is clicked, it redirects the user to another url. I would also want each option to be a banner.
The reason I am doing that is because I have already 10 images known as 10 city, and I want to record the city selection of the user so that I am able to populate the right neighborhood to them.
Update:
Below are the links with their respective images:
<img id="selectNeighbourhood1" src="content/San-Francisco/berkeleyCampanile.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/castro.jpg">
<img id="selectNeighbourhood"src="content/San-Francisco/dogpatch-tasting-room.jpg">
<img id="selectNeighbourhood"src="content/San-Francisco/FD1.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Fishermans-Wharf.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Golden-Gate-Park.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Hayes-Valley.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Marina.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Mid-market.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Mission-district.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Noe-Valley.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Pacific-heights.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Russian-hill.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Soma.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Stanford-university.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Sunset-district.jpg">
<img id="selectNeighbourhood" src="content/San-Francisco/Tenderloin.jpg">
Let this be your html
<select id="select" size="4">
<option value="http://www.google.com">option</option>
<option>option</option>
<option>option</option>
<option>option</option>
</select>
This be your javascript
var select = document.getElementById('select')
select.addEventListener('click', go, false);
function go (e) {
e.preventDefault();
var url = e.target.value;
window.location.href= url;
}
This will allow you to get redirected when clicked on the option
I have something that might work for you. It shows how you can create your own "drop-down", get what the user clicked, and populate a DIV with the appropriate image. I hope that's what you're trying to do.
jsFiddle Demo
The "dropdown menu" is created by DIVs. There's an outer DIV, #top, and a number of child divs, of class .menuitem. The menuitem divs are contained in a wrapper div called #menu, which can slide up/down, giving the appearance of a <select> control.
When you click on a city name, the jQuery code reads the ID of the clicked-on selection, and uses that information to populate a picFrame div. If I was to re-write this, I would do it like this:
revised jsFiddle - instead of inserting the entire img tag, it only updates the src= attribute of the existing img tag
Note that jsFiddle has some issues... it's not a perfect environment. For one, the #head div ("Choose a city") is transparent. It shouldn't be. Also, the city names should be centered -- but jsFiddle does not give preference to an ID (in css, id is supposed to "win" over class)
Anyway, it's a start. Hope it helps.
HTML:
<div id="top">
<div id="head" class="clickable">Choose a City</div>
<div id="menu">
<div class="menuitem clickable" id="m1">
<div class="thepic" id="pic1"><img src="http://placekitten.com/300/50" /></div>
<div class="moveleft">Cupertino</div>
</div>
<div class="menuitem clickable" id="m2">
<div class="thepic" id="pic2"><img src="http://placekitten.com/300/51" /></div>
<div class="moveleft">San Francisco</div>
</div>
<div class="menuitem clickable" id="m3">
<div class="thepic" id="pic3"><img src="http://placekitten.com/300/49" /></div>
<div class="moveleft">Silicon Valley</div>
</div>
</div>
</div>
<div id="picframe"></div>
jQuery:
var themap;
$('#head').click(function(){
$('#menu').animate({
top: 0
},800);
});
$('.menuitem').click(function(){
var loc = this.id;
if (loc=='m1'){
themap = '<img src="http://placekitten.com/g/150/150" />';
}else if (loc=='m2'){
themap = '<img src="http://placekitten.com/149/151" />';
}else{
themap = '<img src="http://placekitten.com/g/151/149" />';
}
$('#menu').animate({
top: '-300px'
},1000);
$('#picframe').html(themap);
});
CSS:
img{opacity:.3;}
.clickable{cursor:pointer;}
#head{height:35px;width:304px;font-size:2em;text-align:center;z-index:2;background:white;}
#menu{position:relative;top:-300px;}
.menuitem{position:relative;width:304px;height:54px;margin:5px 0;}
.thepic{position:absolute;top:0;left:0;}
.moveleft{position:relative;top:10px;left:0;background:transparent;font-size:2em;color:blue;}
#pic1{width:130px;margin:0 auto;}
#pic2{width:200px;margin:0 auto;}
#pic3{width:230px;margin:0 auto;}
#picframe{height:150px;width:150px;border:1px solid grey;}
Reference (re css precedence):
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I have a div that contains 1 to many images with next and previous image buttons. When a user clicks the next/previous button the current image style is changed from display:block to display:none using jquery. I need to get the ID attribute from the current image that is showing ie. has the display:block style applied.
<div id="propPhotos" name="propPhotos">
<div id="propPhotsDivList">
<div id="imageNameId0" style="display:block">
<img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
</div>
<div id="imageNameId1" style="display:none">
<img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
</div>
<div id="imageNameId2" style="display:none">
<img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
</div>
<div id="imageNameId3" style="display:none">
<img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
</div>
</div>
<div>
<div class="row">
<input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick=" ImagePrev()" />
</div>
<div class="row">
<button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
</div>
</div>
This is the path I am currently on which is in the next and previous image click handlers.
CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');
So when the user clicks either button its supposed to assign the id value to the CurrentImageId. This does not work for one and does not help on the initial load when neither next or previous image buttons have been clicked.
Well, there are a few different ways as far as the initial load is concerned. Here are a couple of examples:
Using the :visible selector:
var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');
Or perhaps combined with filter():
var currentImageId = $('#propPhotsDivList img').filter(function(){
return $(this).parent('div').is(':visible');
}).prop('id');
If the divs are hidden and shown correclty using your click handlers, you can use the same functionality inside them as well.
$('#propPhotsDivList').children('div:not(:hidden)').attr('id');
I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>
mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/
HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});
you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example