auto generate html for uploading images - javascript

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.

Related

How to change images in flexslider?

I know this is a very basic question but it has me very confused - there's not much documentation that I could find about the flexslider. Also, I'm very new to this language, I'm a C++ / ASM type person but trying to get a webpage setup. The page is for an internet radio station. The slider is used to show the album covers of the currently playing, next, and later albums. The image names are 'hard-coded' in the slider which is fine if the images don't need to change. The problem is that the images do change every 3 minutes but the browser caches them so even if the image file contents change, the old image data displays.
I spent the last few weeks developing a Windows service that updates the actual image files (Playing.jpg, Next.jpg, etc.) from the SQL database (among other things) only to find out once the slider is initialized, the displayed images don't change.
Anyway, is the slider just used for 'static' images? Any advice as to how to update the images dynamically? php / js?
<li> <img src="Playing.jpg" alt="" >
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
Thank you!
Keeping the filenames the same but changing the image contents makes no difference. What's the general way of changing slider images dynamically? Code snippets would be appreciated.
To avoid the browser cache you can add a random query like that:
PHP:
<li> <img src="Playing.jpg?v=<?php echo rand(); ?>" alt="" >
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
JS:
<li> <img src="Playing.jpg" alt="" id="imageid">
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
<script>
document.getElementById("imageid").src="Playing.jpg?v="+Math.random();
</script>
Mehedi's answer is good but random strings can collide and Math.random() is returning a float, an integer would be better.
So, it is better to use server current UNIX time e.g.:
PHP
<li>
<img src="Playing.jpg?v=<?php echo time(); ?>" alt="" />
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
JavaScript
document.getElementById("imageid").src = `Playing.jpg?v=${Date.now()}`;
document.getElementById("imageid").alt = `Image Name: Playing.jpg?v=${Date.now()}`;
<li>
<img src="Playing.jpg" alt="" id="imageid" />
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
However, this is bad for the user as he is always downloading images. The best solution would be to change the filenames from database and pass that data somehow to your code (maybe an API endpoint or something).
Also, since images are changing every 3 minutes, you could set a cookie in localStorage and check with it for intervals of 3 minutes before passing another time in your <img>.
Personally, I would go with an API-approach.

How can I bring out each image in the dictionary (using html/js)

I'm trying to change(update) the image according to the result.
Other elements bring out well, but the images never change.
Here're my codes:
<article class="result">
<img id="img" class="rounded-circle mt-5" src="img/바리 시작.png" alt="con">
↑ at the front
↓ at the (nearly) end
if(num==13) {
$("#img").attr("src","img/"+result[mbti]["img"]);
The images are on the same route as the HTML file.
Why don't only these image files work?

How to swap between two images with one separate hyperlink ONLY

Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.

replace one external image with another internal in php

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

Can you control the order in which images (hidden vs visible) on a web page are loaded?

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

Categories