I want to display an image using the code below which is contained in a function call.
myWindow.document.write("<center><img border='2' src='../images/autumn/0216.jpg' width='120' height='90' /></center>");
This works fine when you explicitly set the src details e.g. src = '../images/autumn/0216.jpg' and the image is displayed correctly. What I need to do is send the url of the image to the function so I can display whatever image is required (this is the 'photo' reference in the function name). The function name is as follows:
function photoorder(category, reference, photo)
I have tried sending the image url '../images/autumn/0216.jpg' to the function call, it is received and formatted correctly. But when I use the command src = photo the image is not displayed. e.g.
myWindow.document.write("<center><img border='2' src='photo' width='120' height='90' /></center>");
or
myWindow.document.write("<center><img border='2' src=photo width='120' height='90' /></center>");
for this purpose is advisable to use jQuery...
but in your function photoorder(...) photo is a param like "../images/autumn/0216.jpg" ?
the you should use:
myWindow.document.write("<center><img border='2' src='" + photo + "' width='120' height='90' /></center>");
Try:
myWindow.document.write("<center><img border='2' src='" + photo + "' width='120' height='90' /></center>");
Related
Using WordPress 4.5.2 , I am trying to add Gallery Metabox to post using this solution but in js part I am getting this error
Uncaught TypeError: Cannot read property 'url' of undefined
on
attachment.sizes.thumbnail.url
not sure this is JavaScript or WP issue but can you please let me know why this is happening and how I can fix it?
js:
file_frame.on('select', function() {
var listIndex = $('#gallery-metabox-list li').index($('#gallery-metabox-list li:last')),
selection = file_frame.state().get('selection');
selection.map(function(attachment, i) {
attachment = attachment.toJSON(),
index = listIndex + (i + 1);
var thumb = attachment.sizes.thumbnail.url;
alert(thumb);
$('#gallery-metabox-list').append('<li><input type="hidden" name="vdw_gallery_id[' + index + ']" value="' + attachment.id + '"><img class="image-preview" src="' + attachment.sizes.thumbnail.url + '"><a class="change-image button button-small" href="#" data-uploader-title="Change image" data-uploader-button-text="Change image">Change image</a><br><small><a class="remove-image" href="#">Remove image</a></small></li>');
});
});
The solution is very simple and it worker for me.
The error says that there are no images cropped as thumbnails.
Go go Settings -> Media in your WP admin panel and set the thumbnail size.
Than you have to regenerate the images that were already uploaded before with Force Regenerate Thumbnails plugin or just upload new images.
How would you get a product image using javascript in Prestashop? I already know in tpl and php you can use this
$imagePath = Link::getImageLink($product['link_rewrite'], $product['id_product'], 'home_default');
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}`
Is this possible to do this in javascript?
You can use : $('img#ID-of-your-img').attr('src')
this will return you the link to the image ;) .
If you use your javascript file in the same tpl than you can write this.
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}
If you want to get product image from external file than you can find the product image by using the product_image class
like.
.product_image img
and it will help you to get the images of product.
Had the same question thats why i entered this 'stack'
Challenge: Wanted image with different sizes then default product.image size in #layer_cart
Solution:
Made an image with name popup_default in the BO of prestashop.
In /themes/theme_name/modules/blockcart/blockcart-json.tpl added the following at line 36
"image_popup": {$link->getImageLink($product.link_rewrite, $product.id_image, 'popup_default')|json_encode},
Then in /themes/theme_name/js/modules/blockcart/ajax-cart.js
made the following change at line 737
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image + '" alt="' + product.name + '" title="' + product.name + '" />');
into
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image_popup + '" alt="' + product.name + '" title="' + product.name + '" />');
Now i use an image with 'popup' sizes
I want to display image user click from image link in a for loop to a div.
my for loop is as follows.
<a href='' name=my_image[i]
onclick='disp_image('link_image_url')'id=my_image[i] class='popup-open'><img src=my_image[i] width='80' height='65'></a>;
and my javascript function
<script language=\"javascript\">
function disp_image(url){
document.getElementById('image').innerHTML ="<img src=url width='100' height='105'>";
;}
</script>
</script>
However it is not being load in my div content
<div id="image"></div>
can someone has an idea how can i display selected image in a div content dynamically
Use this:
var _leng = my_image.length
, td = "<td><a href='#url#' onclick='displaying(/image#url#)' id='/image#url#'><img src='#url#' width='80' height='65' /></a></td></tr><tr>"
, i;
for (i=0; i < _leng; i++) {
str += td.replace(/#url#/g, my_image[i])
}
Check this example:
http://jsfiddle.net/hMfRG/
You have mismatched quotes so the string isn't being generated properly, or at all... you probably have errors in the console.
str += "<td><a href='" + my_image[i] + " onclick='displaying()' id='/image" + my_image[i] + "'><img src='" + my_image[i] + "' width='80' height='65' /></a></td></tr><tr>";
You can't use these special quotes ‘’ or ”, only use these single or double quotes ' or ".
Example:
document.getElementById('image')
You have displaying() in the loop but below, its called displayImage(). Also, the function expects an argument which you're not supplying in the call.
Look at the syntax highlighting of your post. You can clearly see that your quotes are all over the place. For instance, you have src='"+url+'", which is wrong. You also have "smart quotes" in places. Fix the quotes and it should stop throwing syntax errors.
But most importantly, your onclick function calls displaying(), whereas the function is called displayImage and takes an argument.
I've done it this way:
<div id="result" style="width:450px;height:296px;">
<img name="main" src="/images/image.jpg" alt="">
</div>
function change_pic(img_name,img_src)
{
document[img_name].src=img_src;
}
Problem
I am trying to display the reviews of a Restaurant using Yelps API. I copied Smashing Magazines version of implementing API from their jQuery ebook. The problem is that using this method there are two stores being queried because the previous owners had the same phone number. Yelp can use phone numbers to query reviews and ratings. I need only the currently open store's reviews to display. I want to do it by some how showing Yelp's node elemnt ID. Each store has a unique identifier according to Yelps API and uses node element ID. The ID of the store i want to solely display is ID="Y6D43boKItksYx_d-RQL4g"
The Code Looks Like:
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
var bizContent = '<p><img src="' + business.rating_img_url + '" img=""/><br>'+ business.review_count + ' reviews from Yelp.com</p>';
$(bizContent).appendTo('#yelpAVG');
$.each(business.reviews, function(i,review){
var content = '<div class="comments-block"><p>Posted by ' +review.user_name + ' on ' + review.date + 'via Yelp.com';
content += '<img src="' + review.user_photo_url + '" img=""/>';
content += '<p><img src="' + review.rating_img_url + '" img=""/><br>';
content += review.text_excerpt + '</p>';
content += '<p>Read the full review<br>';
$(content).appendTo('#yelpReviews');
});
});
}
function writeScriptTag(path) {
var yelpScript=document.createElement('script');
yelpScript.type='text/javascript';
yelpScript.src=path;
$("body").append(yelpScript);
}
$(document).ready(function(){
// note the use of the "callback" parameter
writeScriptTag( "http://api.yelp.com/phone_search?"+
"&categories.name=cafe"+
"&phone="+"(408) 292-2070"+
"&ywsid=Iua-78eDnxy0DTqm8I4mDw"+
"&limit=1"+
"&callback=showData");
});
Im a little new to jQuery so I wouldn't know where to begin or what I should start with to display queried results that only have
`ID="Y6D43boKItksYx_d-RQL4g"`
ShowOnly="id":"Y6D43boKItksYx_d-RQL4g" or something similar.
Thanks For Reading.
You can't with API vsersion 1.
but
With APIv2 you can query a specific business by id:
http://www.yelp.com/developers/documentation/v2/business
Some sample code to help you get started is available on github:
https://github.com/Yelp/yelp-api/blob/master/v2/js/business.html
I have a div with text inside:
<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>
Then I extract the text and stick it as a data-url attribute on an image:
var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');
The problem is that the image is being generating like this:
<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">
What am I doing wrong here?
The issue is that you are missing quotes around the value in the tag, but you can't just add quotes because that will still break if the description text has quotes in it.
Instead, try this.
var desc = div.text();
div.replaceWith(
$('<img />', {
"class": "center",
"src": url,
"data-desc": desc
})
);
The other answers are correct, in that you're missing quotes, but the next problem you'll have will be when a description contains a quote and it breaks the HTML. My recommendation is to append the image, then set the data-desc.
div.replaceWith(
$('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);
div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');
forgot the " on either side of the desc
You missing quotes. All attributes values should be in " quotes
div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');
and for url to
src="'+url+'"
from w3c
Attribute values should always be enclosed in quotes
http://www.w3schools.com/html/html_attributes.asp
live demo: http://jsfiddle.net/pzC7b/8/
This will replace quotes with character entity
desc.replace(/\"/g, '"')
Result + encode url:
div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '"') + '" />');
Example on jsfiddle