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
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>
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.
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');
});
});
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
});
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