I want to make my own image viewer, something that's better than what windows can provide.
I want to create an HTML page containing all my images but laid out horizontally as far as the monitor can go. And when I zoom in zoom out, the images also adjust sized and alignment.
I looked into IMGUR but I can't make sense of how they're achieving it. I'm guessing normal HTML can't do it, but some JS is involved as well? But I'm completely not sure.
I last did HTML 10 years ago. No spoonfeed needed, just a general direction.
my current code:
<html>
<body>
<video controls="" loop="" autoplay="" class="" src="somevideo"></video>
</body>
</html>
You could try using flexbox. Something like:
<div style="display:flex; flex-wrap: wrap; width: 100vw; height: 100vh;">
// your image elements
<img style="flex: 1;" src="myImage.png">
</div>
Should give you what you're looking for (at least as far as I can tell).
Related
Firstly, i have almost zero expreience with html or js etc. Please think me as noob :)
I have an offline website (basically images that goes to directions when i click on them), but since there are LOT of images right now, i want to add a search function.
This is my code --> https://jsfiddle.net/v3cjbyq7/
<html>
<head>
<style>
figure.image {
display: inline-block;
margin: 0px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 24px;
padding-left: 20px;
width:225px;
height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
<img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
<img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
<img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
<img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>
(random.js is just a script that gives random order to images)
I found this topic that gives me almost what i want.
how to implement Search function using Javascript or jquery
This is the code --> http://jsfiddle.net/Mottie/ztaz6/2/
There are 2 problems that i need to solve in this example. First, i want to adapt this code to my site, but things i tried didn't change anything. (honestly, i just tried random things by hoping it will work)
Second, i want to hide the search box. I want to create something that looks like this --> https://youtu.be/aOkirKWrHbU?t=85 (sorry i couldn't find a better example) Like when he write "sni", it only highlights things with "sni" inside. Highlighting is perfect, but hiding it would be ok as well.
okay if i understood your question well you need:
-store your images in a key value structure like a hashmap you can create it by following this JavaScript hashmap equivalent basically something like imagelist[image1] will return image1.
-put an empty div tag in your page and give it an id.
-write a keyboard listener after the ready call and in it's callback(which is the function in the $(document).ready(function(){} thingy) write a function that would first inject the text being inputed by the user in the div tag we created earlier and secondly it would look in your image dictionary(the storage we made earlier) using a search by regex(google it) and return the desired image and you can do whatever you like with it afterwards.
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
more you ask, more knowledge you get. Right ? I don't know this question is basic or not but a little make me think hard.
Look pic 1 what do i have.
pic 1: http://imgur.com/YFpfo69
When i upload an image, it will show up to the container called <img id="image"/> and the image is horizontally draggable. My problem is, how do i hide the rest of unused image ? When i dragging the image, the rest will not showing up
To fix this you can place overflow: hidden in the CSS of the parent element of the #image element.
Add the style overflow: hidden; to the parent element, like this:
<div style="overflow: hidden;">
<img src="img.png" id="image" />
</div>
A video website that I use has started to overlay an image on top of their content for users using an adblocker. For instance:
The image is overlaid using the following:
<div class="vid_lhs" id="website-name-message-users">
<img name="Map" usemap="#Map" style="max-width:100%" src="http://drop.website-name.com/website-name/images/website-name-abp-message.jpg">
</div>
And the video is hidden by setting display=none like so:
<div class="vid_lhs" id="ins_videodetail" style="display: none;">
....
<video class="videobase vsc-initialized" id="contentElement" width="100%" height="100%" preload="auto|metadata|none" playsinline="" webkit-playsinline="" src="http://website-nameod.bc.cdn.bitgravity.com/blah-blah.mp4" data-vscid="blah-blah" autoplay="" style="display: inline; object-fit: fill;"> </video>
....
</div>
This is easily bypassed using a simple script on the browser's web console:
$('#website-name-message-users').remove();
$('#ins_videodetail').show();
My question is: What are the different ways by which the website can identify that the DOM is being tampered, so that they can better protect their content? I ask because they seem to change the way this adblock-block is implemented every 2-3 days, which leads me to believe that they may be playing a (pointless?) cat-and-mouse-game with users like me...
I am trying to display a webpage inside a div using object tag of html. I have tried loading it inside a div but since the host name of that webpage differes, it gives CORS error.
Also tried iframe but it requires scrolling='no' to remove scrollbars. So, I decided to use object tag after referring https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am able to remove the scroll bars if I specify fixed height and width in pixels. However, I want to decide this dynamically based on screen resolution to avaoid scrollbars appearing for any devices/browsers.
How can I achieve this? Below is my code snippet.
<div style="width: 100%; overflow:hidden;">
<!-- Main content goes here -->
<object type="text/html" data="<%=url%>" style="overflow: auto;" align="middle" standby="Loading ..." id="py-content"> </object>
</div>
I really appreciate any help on this.