Is there a function to replace one image with another
Example
I want to replace the external image in the output
<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" alt="" class="thumbnail ">
with a internal image
<img src="http://www.alforat.org/attachments/4309d1250860423-12image-insolite02.jpg" alt="" class="thumbnail ">
What you want to use is Javascript, not PHP.
Php is server-side language, while Javascript is client-side.
To make your life with Javascript easier, You should use jQuery, try setting an id for your img and then :
$("#my_image").attr("src","http://www.alforat.org/attachments/4309d1250860423-12image-insolite02.jpg");
About how to handle that, where to put it and how to write Javascript, try Here
Related
I have several images attached to an observable notebook. I'd like to show them all in a cell because the user can toggle through them with a dropdown select. Using an HTML cell, I have:
<style>
figure.small-example-img {
width: 20%;
height: 100px;
display: inline-block;
}
</style>
<figure class="small-example-img">
<img src=`${await FileAttachment('Side.PNG').url()}` />
<figcaption>Side: method one</figcaption>
</figure>
<figure class="small-example-img">
<img src=`${img_urls.houseurl}` />
<figcaption>house: method 2</figcaption>
</figure>
...and so on
In the first, I call the img url explicitly, and in the second I make a variable earlier to hold it. Both ways I end up with:
<figure class="small-example-img">
<img src="\`https://static.observableusercontent.com/files/24_rest_of_url_7a9\`">
<figcaption>Side</figcaption>
</figure>
If I put the URL directly into the src then it works fine.
What is the correct way to template this url into the html?
I suspect it has something to do with strange interpretation of the backticks?
There's an example file for this topic here but it doesn't have an image example
Observable does seem to treat backticks as a special thing. If you take them out it seems to work just fine.
<figure class="small-example-img">
<img src="${await FileAttachment('Side.PNG').url()}" />
<figcaption>Side: method one</figcaption>
</figure>
This is one of those it works, but I don't know why answers, so if anyone knows the details, I'd love to know too!
I understand HTML/CSS pretty well, but not JavaScript. There is a script appending "=s1400" after image path. Why? Image will not load because of this. URL is https://zenith-express.com/airfreight.html (source files can be seen with Chrome DevTools).
Source HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder load-high-res shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" />
Displayed HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png=s1400" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">
I found the answer.
I needed to add "data-width-before-shrink="700" to image tag like this:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="./imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">
I am new to jquery and I am trying to scrape the image source of the second img tag within a div, but can't seem to figure out the correct syntax to pull the second image by id. I feel like this isn't complicated to do, but after trying multiple ways of doing it I'm still stuck and keep getting an "undefined" error. Also not sure if "find" is not the best way to pull this and maybe I should be using something like "getElementbyID"?
Here is the source code I am trying to pull from:
<div class="mainImage" style="width:438px; height:333px;">
<img src="images/default/zoom.png" alt="Click here to see slideshow"
title="Click here to see slideshow" class="zoom" style="display: none;">
<img id="property_image"
src="http://website.com/images/assets/6695_18262.jpg" show="1"
style="width: 438px; height: 333px;">
</div>
Here is what I have:
$('.mainImage').each(function(i, element){
var imgID = $(element).find('img');
var img = $(imgID).find('#property_image').attr('src');
console.log (img);
Any help is much appreciated!
You can simply, use
var img = $('#property_image');
console.log(img.attr('src'));
I have a website coded in html/css, php and js (the latter two parts are just a few basic functions).
When I want to upload an image, I hardcode it. It's a decent solution but now I have to upload 300'ish images (it's for customers who wants to view their images - I'm a photographer).
That will take hours to type so is there a way that I can upload 300 images at once where it autogenerates the following code (however, the .jpg-filename should follow its own filename, and both the "id" and "ng-show" must be incremented each time). It must follow the following format:
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" ng-click="showFacebook = 1;" />
<div ng-show="showFacebook === 1"
class="fb-like" data-href="img/photoshop2.jpg" data-width="300"
data-layout="standard" data-action="like" data-show-faces="false" data-share="true" >
</div>
</li>
I feel this is not possible and the only solutions I've found is where it auto generates a simple html code, but this is not useful in my case.
What do I do?
Either Upload all the images using 1) FTP or 2) use some php file manager
use php directory functions to retrieve the files in an array
Loop through the array and echo your html
use the filename from array value for .jpg-filename, increment a variable in each loop and use for the "id" and "ng-show"
If you are using Angular, why not implement a service to get a list of the images and do something like;
<li class="span4 gallery-item" ng-repeat="image in images track by $index" data-id="id-{{image.ID}}">
<img class="fancybox" src="{{image.smallURL}}" data-big="{{image.bigURL}}" ng-click="showFacebook = image.ID;" />
<div ng-show="showFacebook === 1" class="fb-like" data-href="{{image.bigURL}}" data-width="{{image.width}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
Another option is to do this in PHP, which is probably better.
If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>
The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.
As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/
Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.
If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS