We Keep Coding

Add image to textarea onclick

I am trying to add each different image I click on into the textarea, but I can only get the first image to add.
Just to add I am using Owl Carousel. So here is what the html looks like:
<div class="item link" id="images_available">
<img src="https://s3.amazonaws.com/msluploads/'.$image['name'].'" class="img-responsive img-post"/>
<div class="after">
<span class="zoom">
<i class="fa fa-check text-success"></i>
</span>
</div></div>
The HTML above gets duplicated for every image that is displayed.
Here is what I got so far:
$('.link').on('click', function(event){
var $this = $(this);
var someimage = document.getElementById('images_available');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;
if($this.hasClass('clicked')){
$this.removeAttr('style').removeClass('clicked');
} else {
$this.addClass('clicked');
tinyMCE.get('post_imagetxt').setContent(mysrc);
}
});

If
The HTML above gets duplicated for every image that is displayed.
is completely true, you will have the id images_available in your DOM multiple times. Ids have to be unique though. You always get the first one because
document.getElementById('images_available');
will always get you the first element with this id since it doesn't expect any others in the DOM.
You should be able to fix this by just using this instead of someimage:
var myimg = this.getElementsByTagName('img')[0];

Jquery Show Hide with attribute

How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.

in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").

You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});

The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});

If href equals id of another div do function

I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/

You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.

The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.

Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle

Image Gallery with right and left buttons

I'm pretty new to jQuery and Javascript!
I've made a image gallery where you can click on small thumbnails below and it selects that picture and shows it in a bigger box.
What I want to add is a button on each side of the bigger image which you click on and it changes to the image to the left or right. Problem is, I just can't figure out how :P
(example: https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png)
So this is the code for the click on image and it changes to the image you clicked on:
<script type="text/javascript">
function changePic(img) {
$("#gallery_img").hide();
$("#gallery_img").attr ("src", img.src);
$("#gallery_img").fadeIn("slow")
}
</script>
And this is the HTML part (only the image buttons):
<div id="gallery_buttons">
<img id="right" src="pics/right.png"></img>
<img id="left" src="pics/left.png"></img>
</div>
Thanks in advance! :)

Dunno if you're still looking for a solution or not but here is an example what you can do.
HTML
<div id="prev">Prev</div>
<div id="next">Next</div>
<ul>
<li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li>
<li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li>
</ul>
<img id="gallery_img" src="#"/>
JQuery
$("li").click(function(){
var img = $(this).find('img').attr('src');
$("ul").children().removeClass('selected');
$(this).addClass('selected');
$("#gallery_img").attr("src", img);
});
$('#prev').click(function(){
var prev = $(".selected").prev();
var img = prev.find('img').attr('src');
$("#gallery_img").attr("src", img);
$("ul").children().removeClass('selected');
prev.addClass('selected');
});
$('#next').click(function(){
var next = $(".selected").next();
var img = next.find('img').attr('src');
$("#gallery_img").attr("src", img);
$("ul").children().removeClass('selected');
next.addClass('selected');
});
Here is the jsfiddle where you can see an example of that code. http://jsfiddle.net/gdSD2/
Obviously it's really rough and can be cleaned up but it works. You also have to remember to account for when the user reaches the end of the list. Add some clause for if there is not next or previous sibling.

Modal not visible in Twitter boootstrap

I am trying to display a modal on image click with the image which is clicked, but its not working.
fiddle
I am inserting the content of modal after the user clicks the image using
$("#imageModal").html(modalHtml);
$('#imageModal').modal('show');
This code might now work as I am getting the error: showModal is not defined but the same code is working on my website.
Please help find the issue.

First at the very top of your html body....directly after the <body> tag, and before any content.
Put your modal...without any img, just an empty body...
<div id="imageModal" class="modal hide fade in">
<div class="modal-header"><a class="close" data-dismiss="modal">x</a>
<h3>Select the area</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
Men Topwear
Men Bottowear
Women Topwear
Women Bottomwear<br>
Close
</div>
Then later in your document, wherever you want the images...just wrap them in a <a> tags, and apply the name of the modal box to the href, and apply the data-toggle attribute... data-toggle="modal"
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg" />
</a>
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gal/event/ramaiya-vastavaiya-sp" />
</a>
Then in your Jquery...simply find all the links with the class .galleryImg, or however you want to identify them, and apply a click handler...that passes the image, to the modal.
$('a.galleryImg').click(function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Heres the JSFIDDLE DEMO
UPDATE
After looking at the code you pasted....you cant do it like that, as you are outputting two click handlers, on created items. You need to do it like this...
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
And then sepereately have this outside of the loop....
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Because since you are appending the items, they are dynamically created so you need to use on instead of click
But you also need to wrap it all in a $(document).ready(function()...like so
$(document).ready(function(){
//Facebook login function run/loop
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
//Apply click handler to dynamic links...
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
});