In my university course/module that covers intermediate HTML and CSS, and basic java-script (thought we haven't gotten there yet): I need to create a website using HTML, CSS and optionally java-script as bonus marks.
I am stuck at the gallery, I want to make a responsive image grid (that I can learn/get from https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp); However I want to have a local folder filled with say 100 images and my website with html/css/js code that doesn't require me to manually hard code each individual image from the folder. In hindsight I want to add and remove images from said folder and have the website's gallery adapting to the added/removed images.
Theoretically I assume that I'll need to read in the folder's contents, into a list/array, then somehow parse them and output the content.
I have found two sources that touches on the idea:
- https://www.html5rocks.com/en/tutorials/file/dndfiles/
- https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing
I have searched for a few hours and I would think that such a code should exist somewhere, thought I believe my lack of knowledge regarding html, css, js, etc and general terminology is hindering me in my search, thus any advice would be greatly appreciated.
Thank you in advance for your time and effort.
Consider using a shell script from the corresponding directory where source image files are present.
You can simply make a .cmd file with the following code and execute that, it would dynamically generate an html file where you can display images as you wish.
scriptToExecute.cmd
echo ^<!doctype html^>^<head^>^</head^>^<body^> >> index.html
for %%j in (*.JFIF, *.png, *.JPG, *.GIF) do echo ^<img src=^"./%%j^" style="width:176px;height:300px" ^> >> index.html
echo ^</body^>^</html^> >> index.html
index.html
<!doctype html><head></head><body>
<img src="./2.jfif" style="width:176px;height:300px" >
<img src="./3.jfif" style="width:176px;height:300px" >
<img src="./4.jfif" style="width:176px;height:300px" >
<img src="./1.png" style="width:176px;height:300px" >
</body></html>
You can make changes to the shell script to display the images in different elements such as a carousel, etc.
If you want to load images from a folder dynamically (not entering each manually) you can't avoid needing javascript. Adding jQuery into the mix makes it easier not harder. Don't be afraid of using jQuery even if you're only just starting to learn javascript.
To be able to use jQuery, all you need to do is add this:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
Essentially what that does is add the $ variable which you'll see in the following code provides a straightforward way to make an ajax call and also to add new img elements to the body element.
To create an element for each image in the folder (assuming it contains only images) should be as simple as the following:
<script type="text/javascript">
var folder = "images"; //TODO: change this to the path to your folder with the images.
$.ajax({
url: folder,
success: function(data) {
$(data).find("a").attr("href", function(i, val) {
$("body").append("<img src='" + folder + '/' + val + "'>");
});
}
});
</script>
Alternately, if you just want to avoid having to type out all the img elements by hand and fill in each src attribute by hand, you can write a bit of javascript that automates that. Using the following script you'll be able to click 'Choose Files' and select all the images in the folder, click 'Open', and then click 'Go' and it will generate the html for all the img elements and display it. You can then copy that html and manually paste it into your real project.
<input id="file" type="file" multiple />
<button onClick="go()">Go</button>
<div id="output"></div>
<script type="text/javascript">
function go() {
const fileInput = document.getElementById('file');
const outputDiv = document.getElementById('output');
let html = '';
for (const file of fileInput.files) {
html += '<img src="images/' + file.name + '" />';
}
outputDiv.textContent = html;
}
</script>
https://codepen.io/rockysims/pen/MPEMOG
Related
I have a page where I render a lot of images and because of that I was advised to look up and implement image lazy loading. After googling, I decided to use the vue-lazyload package - https://github.com/hilongjw/vue-lazyload, however, I hit a brick wall rather quickly. Right now I render my images like this:
<div v-for='card in filteredByAll'>
<img :src='"../assets/cards/" + card.cardCode + ".webp"'>
</div>
Which works fine and dandy. As you can see, I just build my URL inside the src. Now if I want to use the vue-lazyload package, I have to remove the src and add a Vue.js directive v-lazy and put the URL inside of it like this:
<div v-for='card in filteredByAll'>
<img v-lazy="">
</div>
The problem is that whenever I try this:
<div v-for='card in filteredByAll'>
<img v-lazy='"../assets/cards/" + card.cardCode + ".webp"'>
</div>
The image doesn't render. Honestly I'm not even sure if I can build the URL inside the v-lazy but what is my other option? I tried using random image URLs I found on google and it worked fine so the package is working fine, so I think I'm likely making a mistake somewhere.
I have a JavaScript file where I need to create some kind of dictionary (containing translated text) from a html page, and to be able to change language from the HTML header.
<a class="text-center" id='lnkHumanResources'>
<p><img width="100" height="100" src="assets/img/icons/home-hr.png" /></p>
<h1>Ljudski resursi</h1>
</a>
This is an example of code containing the string which needs to be translated
"Ljudski resursi" to "Human Resources".
So, I need to have some hard - coded text on different languages in .js file, and some kind of method to change language from HTML header, and include it to few HTML pages that need to be able to change language.
Solved
Whoever gets stuck with same kind of problem, see Translate.js
Download plugin and unzip it into your lib folder, and include it to all html pages you want to translate
<script src="assets/js/lib/translate.js-master/jquery.translate.js"></script>
I also created dictionary.js containing all strings I wanted to translate from all pages on few languages, and included it also to all html pages that needed to be translated
var dict = { // dictionary.js
"Home": {
pt: "Início",
en: "Home"
},
"Download plugin": {
pt: "Descarregar plugin",
en: "Download plugin"
}
};
Include to html example:
<script src="assets/js/lib/dictionary.js"></script>
Don't forget to wrap all hard coded strings with span attribute with class "trn"
<p class="some-class"><span class="trn">Text to translate</span></p>
Then just add next line in html pages and you're good to go :)
var translator = $('body').translate({lang: "en", t: dict}); // en to use English
you can use text function of jquery to change the content of the h1
$('#lnkHumanResources h1').text("Human Resources");
dont forget to link the JQuery to your Html page
The problem I am having is similar to some questions already posted, but none of them provids an answer in respect to ZF2.
What I am trying to achieve is this: on an image click a clearbox (lightbox) should open with a form from a different PHP file.
What i have:
a view script in .phtml format which contains the image to be clicked.
an image.php file which contains the code for the function to be executed when the form is processed in the clearbox.
clearbox is attached and working fine:
<a
href="link\to\image.php"
rel="clearbox[width=800,height=600]"
title="Caption"
>
<img
src="img/test.jpg"
class="img-responsive img-rounded"
style="width:150px; height:200px;"
>
</a>
The problem:
First of all, where should I keep the image.php file in ZF2? And if I need to write a function as we do in pure PHP, keep all the functions in one file, whats the best practice in ZF2?
I tested the file as separately and it worked, but if I use the same URL for the clearbox, it will also display the layout for the page in box, which I don't want. So I need just the content of the file to work.
Please, let me know if the question is unclear.
EDIT:
Also, the page used in clearbox is coming through router using a separate .phtml view script, it would be great if someone can tell me how to call the file directly for the clearbox.
the solution for your problem is very simple you need to tell ZF2 that your view model is terminal so it won't render the layout file:
<a href="link\to\image.php?terminal=true" ...
and in the action :
$isTerminal = $this->params()->fromQuery('terminal',false);
$view = new ViewModel();
$view->setTerminal($isTerminal);
$view->setTemplate('my view script');
$view->setVariables(array(
'myvar' => $myvar,
));
return $view;
I've managed to get the picture to open the bigger version of the picture into a new window using this code:
<IMG SRC="pic_small.jpg" onClick="view();">
<script language="JavaScript">
function view() {
imgsrc = "pic_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines
<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">
I was also wondering if there is some way to make the window that opens the the same size as the big picture.
For your first question
<IMG SRC="pic_small.jpg" onClick="view(this);">
<script language="JavaScript">
function view(img) {
imgsrc = img.src.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
UPDATE
To your second question, it can be done.
UPDATE 2
This depends on your image names keeping that same format. Alternatively, you could do this:
<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2
By including lightbox, in combination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.
image #1
See more examples here in the "how to use" section in the aforementioned link
Look at jQuery library which almost de-facto library for JS.
Using it you can do something like that
$('img').click(function(){
view($(this).attr('src'));
})
function view(small){
var big = small.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
This way all your images will have the same behavior
Rather than trying to create tons of different pages on my website, I'm trying to update the content of a single div when different items in the navbar are click to update the maint div content. I tried to find a simple example using Javascript:
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
Click me to replace the content in the container.
</a>
This works just fine when I only try and update text, but when I put an img tag in there, as you can see, it stops working.
Either
1) what is the problem with how I am trying to do it?
or 2) What is a better/easier way to do it?
I'm not stuck on Javascript. jQuery would work too, as long as it is just as simple or easy. I want to create a function that will just let me pass in whatever HTML I want to update and insert it into the div tag and take out the 'old' HTML.
You just have some escaping issues:
ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
^ ^
The inner ' need to be escaped, otherwise the JS engine will see ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors resulting from the subsequent 2.jpg'>'). Change the call to (tip of the hat to cHao' answer concerning escaping the < and > in the HTML):
ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>')
A simple way to do this with jQuery would be to add an ID to your link (say, "idOfA"), then use the html() function (this is more cross-platform than using innerHTML):
<script type="text/javascript">
$('#idOfA').click(function() {
$('#example1div').html('<img src="2.jpg">');
});
</script>
First of all, don't put complex JavaScript code in href attributes. It's hard to read or to maintain. Use the <script> tag or put your JavaScript code in a separate file altogether.
Second, use jQuery. JavaScript is a strange beast: the principles underlying its patterns were not designed with modern-day web development in mind. jQuery gives you lots of power without miring you in JavaScript's oddities.
Third, if your goal is to avoid having to endlessly duplicate the same basic structure for all (or many) of your pages, consider using a templating system. Templating systems allow you to plug in specific content into scaffolds containing the common elements of your site. If it sounds complicated, it's because I haven't explained it well. Google it and you'll find lots of great resources.
Relying on JavaScript for navigation means your site won't be indexed properly by search engines and will be completely unusable to someone with JavaScript turned off. It is increasingly common--and acceptable--to rely on JavaScript for basic functionality. But your site should, at minimum, provide discrete pages with sensible and durable URLs.
Now, all that said, let's get to your question. Here's one way of implementing it in jQuery. It's not the snazziest, tightest implementation, but I tried to make something very readable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<style type="text/css" media="all">
/* all content divs should be hidden initially */
.content {
display: none;
}
/* make the navigation bar stand out a little */
#nav {
background: yellow;
padding: 10px;
}
</style>
</head>
<body>
<!-- navigation bar -->
<span id="nav">
about me |
copyright notice |
a story
</span>
<!-- content divs -->
<div class="content" id="about_me">
<p>I'm a <strong>web developer</strong>!</p>
</div>
<div class="content" id="copyright">
<p>This site is in the public domain.</p>
<p>You can do whatever you want with it!</p>
</div>
<div class="content" id="my_story">
<p>Once upon a time...</p>
</div>
<!-- jquery code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
// Wait for the document to load
$(document).ready(function() {
// When one of our nav links is clicked on,
$('#nav a').click(function(e) {
div_to_activate = $(this).attr('href'); // Store its target
$('.content:visible').hide(); // Hide any visible div with the class "content"
$(div_to_activate).show(); // Show the target div
});
});
</script>
</body>
</html>
Ok, hope this helps! If jQuery looks attractive, consider starting with this tutorial.
Your main problem with your example (besides that innerHTML is not always supported) is that < and > can easily break HTML if they're not escaped. Use < and > instead. (Don't worry, they'll be decoded before the JS sees them.) You can use the same trick with quotes (use " instead of " to get around quote issues).