add content through javascript - javascript

I am trying to create a page where when you click on any of the three images. It inserts the content into the empty div above the image links.
Here is my javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />);
return false;
});
});
</script>
and this is the HTML it is to effect:
<div class="deal_content">
</div>
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</div>
I wish the new image to be put in the deal_content class div.

In your append method, if you put double quotes around the HTML and replace the current quotes with single quotes, it should work. Append takes a string or a JQuery selector, not markup.

You need to make the element a string in order to pass it through append
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />');
return false;
});
});

Considerting this is what you want:
I wish the new iamge to be put in the deal_content class div.
You are almost there:
In the Javascript that you have:
$(document).ready(function () {
$('img').click(function () {
$('.deal_content').append();
return false;
});
});
you need a html() instead of append(). And insert a img tag, and grab the srcfrom the image thatw as clicked on.
$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");
See http://jsfiddle.net/nivas/PA63e/

$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this );
});
or if you want to duplicate the image:
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this.cloneNode() );
});
is that what you want? This way it will only move the images that are inside imagelink element

Related

Javascript dont take changed variable

I have a gallery function with an imagezoom at the big image.
When the big image is changed and i click on it to activate the zoom function, it shows the old image.
I think the variable isnt changed in javascript?
<script type="text/javascript">
function change_img(imgurl) {
image = document.getElementById('preview');
image.src = imgurl
imageURL = imgurl
}
$(document).ready(function(){
var imageURL = document.getElementById('preview').src;
$('#ex3').click(function() {
var imageURL = document.getElementById('preview').src
$('#ex3')
.zoom({ on:'click', magnify:1.8, url:imageURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
EDIT:
This way the thumbnails will be created:
<span class='zoom' id='ex3'>
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<!-- BEGIN thumbs -->
<div class="thumbnails">
<img id="thumbimg" onclick="change_img('{PATH}/{thumbs.ID}')" name="img" src="{PATH}/{thumbs.ID}" alt="" />
</div>
<!-- END thumbs -->
In javascript .zoom it should be the changed path at "url:imageURL".
Anyone knows how to get the actual path in imageURL?
EDIT: Will this work?--I'm honestly not sure if this zoom function changes the img source or not. If it doesn't, changing that from here, should be fairly easy. There seemed, from a search, to be several of which you could be using.
<span class='zoom' id='ex3' data-src="changedimg.jpg">
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<script type="text/javascript">
$(document).ready(function(){
$('#ex3').click(function() {
var newURL = this.data('src')
$('#ex3')
.zoom({ on:'click', magnify:1.8, url: newURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
</script>

How to handle: When image is clicked identical image generated using Javascript

The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.

Replace large img src with thumbnail img woocommerce products loop

I'm using woocommerce, and by default it use the large image in the product loop.
The goal is that I want to replace each large product image (1000x1000px) with the thumbnail image (300x300px) which is contained in the same folder as the large image.
Here is the html code:
<div class="products_container">
<ul>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2606" src="//wp-content/uploads/2015/08/IMG_2606.jpg" />
</a>
</div>
</li>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2607" src="//wp-content/uploads/2015/08/IMG_2607.jpg" />
</a>
</div>
</li>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2608" src="//wp-content/uploads/2015/08/IMG_2608.jpg" />
</a>
</div>
</li>
...
...
...
</ul>
</div>
With a total of 24 products per page.
And the jQuery :
I tried to put the jQuery code under the <script></script> tag in the child-theme/woocommerce/loop/loop-start.php file before the <ul>, and in my custom.js file, both doesn't work.
jQuery(document).ready(function($) {
$('.products_container img.wp-post-image').each(function() {
var $this = $(this);
$this.attr('src').replace('.jpg', '-300x300.jpg');
});
});
If I put this code in the browser console, it replace the large image with the thumbnail as I want $('.products_container').find('img.wp-post-image').attr('src').replace('.jpg', '-300x300.jpg');
Any help would be appreciated
You can pass a function as the second parameter of .attr( attributeName, function )
The function is called for each element in the set and should return the new value of the attribute you've defined with the first parameter
jQuery(document).ready(function ($) {
$('.products_container img.wp-post-image')
.attr('src', function(idx, src) {
return src.replace('.jpg', '-300x300.jpg');
});
});

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});
Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});
If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");
Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

how to assign value of a div to another div

I am new to jquery . I wrote small piece of code
<div id="tablediv"><table><tr><td><h2>Select SalesPerson</h2></td><td id="heading"><h3> Click Here </h3></td></tr>
<tr><td></td><td id="101" class="options">12304</td></tr>
<tr><td></td><td id="102" class="options">12305</td></tr>
<tr><td></td><td id="103" class="options">12306</td></tr>
<tr><td></td><td id="104" class="options">12307</td></tr>
</table></div>
</center>
<div id="imagediv"><img src="" id="photo" alt="No Image Found" width="150" height="150"/></div>
And I used the following jquery code:
$(document).ready(function(){
$('td.options').hide();
$("#heading").click(function(){
$('td.options').toggle();
});
$("td.options").hover(function(){
var imgsrc = $(this).attr('id')+".jpg";
$("#photo").attr('src',imgsrc);
});
$("td.options").click(function(){
// $("td.options").val($("#heading").val);
//alert($('td.options').text());
//alert($(this).parent().attr('id'));
//alert($(this).parents('.class'));
$('td.optiodns').hide();
});
});
Now when I click any on of the options (12304/12305/12306/12307), that value has to replace the content of heading tag. How to do it?
You guess you are looking for the html function:
$("#heading").click(function() {
$('td.options').toggle();
});
$("td.options").hover(function() {
var imgsrc = $(this).attr('id')+".jpg";
$("#photo").attr('src',imgsrc);
});
$("td.options").click(function() {
$("#heading").html($(this).html());
$('td.optiodns').hide();
});
You can read about the text() and html() functions here jquery api - html

Categories