how to insert this javascript code :
thejavascript
inside img src in php
<img src="http:'.$iv[$j].'.jpg" height="220" width="200" alt="Image '.ucwords($kw).'" "thejavascript">
Thanks
You can use this jQuery script to add and onClick event in your balise img but you must adding an attribute id into your image. An id must be unique in your html page.
$("img#idImage").click(function({
window.open('welcome.html','welcome');
}));
$kw = $ucwords($kw);
"<img id='idImage' src='http:{$iv[$j]}.jpg' height='220' width='200' alt='Image {$kw}' />";
But the best will be to separate attributes height and width into a CSS stylesheet.
Insert the following HTML outside PHP brackets and it should work according to the way you posted it. I'm making a few assumptions, one being that the link you posted wraps the image code and that the PHP variables turn the image into valid code.
<a href="javascript:void(0);" onclick="window.open('welcome.html','welcome')">
<img src="http:<?=$iv[$j]; ?>.jpg" height="220" width="200" alt="Image <?=ucwords($kw); ?>">
</a>
More simple, replace "thejavascript" (with the "") by :
onclick="window.open(\'welcome.html\',\'welcome\')"
A bit different approach, onclick event is on img tag.
$javascript="window.open('welcome.html','welcome')";
$img='<img src="http:'.$iv[$j].'.jpg" height="220" width="200" onclick="'.$javascript.'">';
echo $img;
Related
My end goal is to create a gallery of Images that when clicked link to an external website. This needs to be done through Advanced Custom Fields, so I made a repeater that has the image and link in the same row:
link1 | cover_image1
link2 | cover_image2
Right now I'm inserting this code into a text editor inside my webpage. I also imported some short-code from here, that allows me to use %ROW% as an iterator.
"attachments" is the parent repeater and "link" and "cover_image" are the children.
[acf_repeater field="attachments"]
external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image']
<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>
[/acf_repeater]
The webpage renders this:
Where the broken image contains this code:
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214">
I think [acf field ='attachments_%ROW%_cover_image'] in <img> isn't resolving all the way to the url, as external url = and image url = both render the correct urls.
Wordpress also converts my code to this after saving, so its probably a syntax error?
[acf_repeater field="attachments"]
external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]
<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>
[/acf_repeater]
I'm not sure how to properly convert [acf field ='attachments_%ROW%_cover_image'] to a url in the <img> and I could use some help on the proper syntax. Thank you so much for you help!
html for the attribute per Arian:
<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa"
data-node="5d4926759d7aa">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Agenda: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&resize=640:*</p>
<p>Video Links: </p>
<p>Thumbnails: </p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" ]=""><br>
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" ]=""><br>
<img src="[acf" field="attachments_1_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" ]=""><br>
<img src="[acf" field="attachments_2_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
</div>
</div>
Not a wordpress guy, but seems like wordpress prevents expanding/executing shortcodes with parameters within html attributes, maybe this could work as workaround if you can put php code there:
<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>
<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>
Actually i found comment on this:
It appears it's using the same quotes for the HTML attribute and the shortcode's attributes that create problems.
at here
so this may work too:
<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>
or without shortcode quotes:
<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>
last option i can think of is creating parameter-less shortcodes like this:
function acflink_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');
function acfimage_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');
then using in editor like:
<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>
I'd like to pass the current img src to a function I'm working on (to get more data from a database)
Is there a simple way to grab the src from within the img tag?
I'd like to do this:
<img src="http://example.com/images/1.jpg" alt="amazing image" data="<?php echo( get_extra_data($img_src) ); ?>" />
Rather than this:
<img src="http://example.com/images/1.jpg" alt="amazing image" data="<?php echo( get_extra_data("http://example.com/images/1.jpg") ); ?>" />
I'd like to dynamically get the src from the current img rather than having to have the url twice if that makes sense.
In other words, could the function get_extra_data() reference the img element it was called from?
This is because I'd like to just paste data="<?php echo( get_extra_data($img_src) ); ?>" into the exsisting image elements I need it on.
Images in PHP files have an "alt" tag, but I need to duplicate its content to "title" tag. So the code automatically reads the page when it loads, and adds the new "title" tag beside the "alt" tag, whether using PHP, jQuery, JavaScript..
Example:
<img border="0" src="../../../../images/divider.jpg" alt="description of image" width="410" height="15">
Output:
<img border="0" src="../../../../images/divider.jpg" alt="description of image" title="description of image" width="410" height="15">
Using JavaScript, you can search <img> tags, and add this title attribute:
let imgs = document.querySelectorAll('img');
for (let i=0;i<imgs.length;i++) {
if (!imgs[i].title) // if title is not defined
imgs[i].title = imgs[i].alt;
}
Using jQuery, you can use find images $('img') and loop using each():
$('img').each(function(img) {
if (!this.title)
this.title = this.alt;
});
I have this code:
<img src="'. $random_pics[$i] .'" width="'.$thumb_width.'" alt="" name="?album='. urlencode($albums[$i]) .'" class="alb" />
<div id="pictures"></div>
<script>
$('.alb').click(function(){
var href = $(this).attr('name');
$("#pictures").load('display.php'+href)
});
</script>
Then I have a display.php file, where I use $_GET['album'] to get the album name and display the photos from that album.
How it should work: when I click the image, the pictures div should load the display.php?album=somealbum, but for some reason it does not... My files are bigger, but I think the problem is here.
It looks like you missed the php tags around each of those embedded php codes. Or perhaps there should be more to the snippet you provided?
<img src="<?php echo $random_pics[$i]; ?>"
width="<?php echo $thumb_width; ?>"
alt=""
name="?album=<?php echo urlencode($albums[$i]); ?>"
class="alb" />
Pretty straight forward simple question, can you open a php code block to call image information in html? I don't think I phrased that right. Here is my code:
<img src="../inventory_images/' . <?php echo $item_number; ?> . '.jpg" width="150" height="150" border="2" />
This code is within the tags
I'm just trying to post a photo using the $item_number variable (which is also the name of the image file i.e. $item_number = T3144 and the image file is name T3144.jpg ). Also if there is a better way to accomplish this suggestions are happily accepted. Sorry to take up bandwidth with such a remedial question but for some reason I can't seem to answer this question in research. Thanks for taking the time everyone.
Your code is wrong, try:
<img src="../inventory_images/<?php echo $item_number;?>.jpg" width="150" height="150" border="2" />
with what you have it looks like the code you had would print
src="../inventory_images/' . whateveritem_numberis . '.jpg"
Yes that is perfectly fine, but make sure that this code is in a file that ends with .php or it will not get parsed by PHP. Also, you need to take out the single quotes and periods:
<img src="../inventory_images/<?php echo $item_number; ?>.jpg" width="150" height="150" border="2" />
Unless the above HTML is in an echo statement, you need to change it to this:
<img src="../inventory_images/<?php echo $item_number; ?>.jpg" width="150" height="150" border="2" />
That will in-turn look like this:
<img src="../inventory_images/T3144.jpg" width="150" height="150" border="2" />
Of course, that is going off of your example where $item_number = 'T3144';.
The single quotes and periods are used for concatenating variables inside of strings.