Develop Reference

Jquery fadeIn fadeOut on click (data attr)

I have the following set up in my html:
<div class="col-sm-8">
<img id="click-1" class="glasses one active" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png"/>
<img id="click-2" class="glasses two" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:red;"/>
<img id="click-3" class="glasses three" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:blue;"/>
<img id="click-4" class="glasses four" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:pink;"/>
<ul class="toggle_points">
<li data-toggle-target="click-1">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-2">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-3">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-4">
<div class="circle"><div class="inner_circle"></div></div>
</li>
</ul>
</div>
And I'm looking to fadein and out images based on the click. I have them sharing a connect with a data-attr and Id's.
I feel like my current jquery is on the right path but Im definitely missing/forgetting something
$('.toggle_points li').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active').find('img.active').fadeOut().removeClass('active);
});

You need to break up your jQuery statement into:
$('.toggle_points li').click(function (e) {
$('img.glasses.active').fadeOut().removeClass('active');
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active');
});
In your code, .find('img.active') will attempt to search the descendants of the image you select, but won't find a match since the image you want isn't a descendant. Also, you left out a ' in your removeClass().

Here's a fiddle https://jsfiddle.net/k53k9ydy/ that should lead you in the right direction and also caches the elements you're selecting to variables.
$('.toggle_points li').on('click', function (e) {
var $this = $(this);
var el = $(this).data('toggleTarget');
if ($this.hasClass('active')) {
$('#' + el).fadeIn().toggleClass('active');
$(this).toggleClass('active');
} else {
$('#' + el).fadeOut().toggleClass('active');
$(this).toggleClass('active');
}
});

jQuery function OnClick doesn't work after the custom lazy load function loads the data into the container

I made my own custom lazy load function with jQuery. Everything on Lazy load side works fine. When the html data from the server is appended to the container, the jQuery function $(".send-comment").on("click"); doesn't work but when its without lazy load its works fine.
JavaScript
/** JavaScript that executes then hit bottom of the document (Lazy Load functionality)*/
$(window).scroll(function () {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
var limit, pageOffSetAttr, url, dataID;
url = "/ajax/lazy-post.php";
limit = 5;
dataID = $("#pageOffSetAttr").attr("data-id");
pageOffSetAttr = $("#pageOffSetAttr").val();
pageOffSetAttr = parseInt(pageOffSetAttr) + limit;
pageOffSetAttr = $("#pageOffSetAttr").val(pageOffSetAttr);
pageOffSetAttr = $("#pageOffSetAttr").val();
$.post(url, {pageOffSetAttr:pageOffSetAttr, dataID:dataID}, function(data){
$(".feeds-unit-container").append(data);
});
}
});
/** AJAX the send comment */
$(".send-comment").on("click", function(){
var callback, context, url, dataAjax, dataID, code, msg;
callback = $(this).attr("data-add-back-btn");
url = "ajax/update-status.php";
context = $("input#new-comment-" + callback ).val();
dataAjax = $("input#new-comment-" + callback ).attr("data-ajax");
dataID = $("input#new-comment-" + callback ).attr("data-id");
$.post(url, {callback:callback, dataAjax:dataAjax, dataID:dataID, context:context}, function(data){
data = data.split("|");
code = $.trim(data[0]);
msg = $.trim(data[1]);
$("input#new-comment-" + callback ).val("");
$("#feeds-comment-" + dataID).fadeIn("fast").prepend(data);
});
});
HTML Side from Lazy Load PHP Script
<div class="row margin0" id="wall-post-#">
<div class="col-md-4 pad0 parent-profile-image">
<a href="#">
<img alt="#" title="#" src="#" width="50" height="50">
</a>
</div>
<div class="col-md-8 pad0 parent-profile-details">
<ul class="pad0">
<li class="name">#
<li class="post"><p>#</p></li>
<li class="likes">
•Delete
•Comment
•<span class="post-time gray">#</span>
</li>
<li class="comment bg-default">
<!-- Comment Box -->
<li class="stats gray commentbox">
<div class="row margin0">
<div class="col-md-4 pad0 commentbox-image">
<img alt="#" title="#" src="#" width="30" height="30">
</div>
<div class="col-md-8 pad0 comment-details f12" style="width: 90%;">
<ul class="pad0">
<li class="">
<p class="margin0">
<input id="new-comment-#" type="text" class="pull-left" data-ajax="send-comment" data-id="#" placeholder="Write a comment..."/>
<button data-add-back-btn="#"type="button" class="send-comment" title="Send Comment..."></button>
</p>
</li>
</ul>
</div>
</div>
</li>
<!-- ** Comment Box -->
<!-- Comment Feeds -->
<li class="stats gray comment-feeds">
<ul class="pad0" id="feeds-comment-#">
<li class="name pad2" id="feeds-comment-#">
<div class="col-md-4 pad0 comment-image">
<a href="#">
<img alt="#" title="#" src="#" width="50" height="50">
</a>
</div>
<div class="col-md-8 pad0 comment-details f12">
<p><a class="bold" href="#">#</a>#</p>
<div class="col-md-8 pad0 comment-iteractions f12">
•Delete
•<span class="post-time gray">#</span>
</div>
</div>
</li>
</ul>
</li>
<li class="stats gray comment-feeds">
<ul class="pad0" id="feeds-comment-#">
</ul>
</li>
<!-- ***Comment Feeds -->
</li>
</ul>
</div>
</div>

try to use delegation
change
$(".send-comment").on('click', function(....
to
$(document).on('click', ".send-comment", function(....

When you first run $(".send-comment") it is empty (i.e. $(".send-comment").length === 0, it is not until the content is appended to the DOM, that you can bind.
Try adding your current bind logic to the $.post callback.

If you want to attach events on dom elements that are not attached to the don now(that will be attached threw Ajax request for example) you should use the following
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
For example:
$( document ).on( "click", ".sent-comment", function(){...});

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
So for your problem is future DOM could not binding the events properly. Ty to fix for the future DOM element.
The solution is Equivalent to .live() would be something like
/** AJAX the send comment */
$(document).on("click", ".send-comment" , function(){
// your code here
});

Matching division widths with jquery

This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.

Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});

Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});

Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help

How to wrap a link to all images inside a div?

I have something like this:
<img class="photo" src="www.example.com" />
<img class="photo" src="www.example2.com" />
<img class="photo" src="www.example3.com" />
And I need to get this:
<a href="www.example.com" class="link">
<img class="photo" src="www.example.com" />
</a>
<a href="www.example2.com" class="link">
<img class="photo" src="www.example.com2" />
</a>
<a href="www.example3.com" class="link">
<img class="photo" src="www.example.com3" />
</a>
I need to add the link, the href with the same code as the SRC of each image, and a class.
I was trying to do it like this:
$('.photo').wrapAll('<a>');
But it doesn't even work.
What am I doing wrong?

Because the hrefs will all be different, you'll need to use each.
$('img.photo').each( function() {
var $img = $(this),
href = $img.attr('src');
$img.wrap('');
});
Note that wrapAll isn't what you want anyway as it will take all the elements and wrap them with a single anchor tag. If you weren't using an anchor that needs a different href for each element, wrap would work by itself and wrap each one individually.

$('img').wrap("<a href='foo'>") will work just fine.

Try this:
$('.photo').before('<a href="www.example3.com" class="link">');
$('.photo').after('</a>');
And if you want
$( '.photo' ).each( function() {
var mySrc = $( this ).attr( "src" );
$( this ).before( '<a href="' + mySrc + '" class="link">' ) );
$( this ).after( '</a>' ) );
});
I hope this works for you...

Fade In Fade Out Problem with a Image Gallery

I am using a image gallery in WordPress, images are fetching from database and displaying it into front end.
In my case a big image container, and three image thumbnail,
I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.
My Html Markup
<!--A container Div which have 1st image from the thumbnail-->
<div class="wl-poster">
<a href=#" id="wl-poster-link">
<img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
</a>
</div>
<!--For Thumbnails-->
<div id="wl-poster-thumb">
<ul id="posterlist">
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/">
</li>
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
</li>
<li class="poster-thumb" style="margin-right: 0pt;">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com">
</li>
</ul>
</div>
Used jQuery
if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('.wl-poster img').attr('src',final_src);
jQuery('.wl-poster a').attr('href',href_path );
}
jQuery('#posterlist .poster-thumb img').click(function(){
var href_path = jQuery(this).attr('rel');
var img_src = jQuery(this).attr('src');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('#poster-main-image').remove(function() {
jQuery('a#wl-poster-link').attr('href',href_path);
jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
// $('#img1').fadeOut('slow').remove();
// $('#img1').fadeOut('slow').fadeIn('slow');
});
});
Please help me to solve this issue.

try it with this code:
jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn
jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });
You added a point too much on your chaining. Also, the remove-function is not needed.
You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.