javascript, jquery will not show images at 15" screen - javascript
At a website I am displaying images in 5x 5 grid, using . On the last picture, custom parts, I wish to display a rotating images. This panelGallery js script works fine on all screen sizes apart from 15" screen, when testing, where the whole of the 15" screen is gets occupied by magnified version of the small rotating images, covering all the images behind.
Any help to solve this pestering problem would be much welcome.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
</head>
<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">
<div id="container">
<img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>
Custom Parts
A live example would help provide a better example.
however, here's my fix - not knowing all the moving parts(css, the js library you are using, etc..). So I suggest making a CSS class and creating a fixed max width to prevent it from displaying huge at 15 inches wide.
Try a media over-ride on the container
<div class="container">...</div>
a CSS solution
#media screen and (max-width: 1800px) {
.container { width:1800; }
}
or you just just set a max-width on that div
.container { max-width:1800px; }
Now instead of 1800px use whatever screen width the images displayed correctly at.
Related
How do I remove the loading icon after the image is loaded?
I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.
I use the same external CSS file for loading icons. None of the closest solutions worked for me.
Any suggestions and help would be appreciated.
HTML
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
CSS
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
You can implement onload event of image, inside it remove class wrapper as
$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })
Update: if you want to remove only loading for each image change to remove parent class only.
$(this).parent().removeClass('wrapper');
$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
Really need another pair of eyes to look at some JavaScript code
I think it is just something simple, but I have done trying for two days.
All I want to do is just to hide one image and turn on the other image. But nothing seem to work. I have tried clearing the browser cache ever time I test the page. Every time I mouse over on the image map to trigger function Change1(), all it does is hiding image "body_interactive_image_default.png". But it does nothing to image "body_interactive_image_love_lit.png"???? Why????
The browsers I am using:
Windows Chrome 75.0.3770.100
Windows IE 11
Android Chrome 75.0.3770.100
Here is my JavaScript code:
function change1() {
document.getElementById('maptreebg').style = "visibility:hidden; z-index: 0";
document.getElementById('image1ch').style.display = "block";
document.getElementById('image1ch').style = "visibility:visible; z-index: 100";
document.getElementById('image1ch').width = 290;
document.getElementById('image1ch').style.width = 290;
return true;
};
Here is my HTML code:
<div id="div4" class="div4">
<img name="maptreebg" id="maptreebg" class="img4" alt="" src="/handheld/images/mainbody/body_interactive_image_default.png" usemap="#maptree" />
<map name="maptree" id="maptree" class="maptree">
<area id="ar1" shape="poly" coords="3,390,13,381,66,371,113,351,172,313,193,290,217,273,242,259,297,238,344,222,394,213,461,206,521,202,588,205,638,208,694,221,751,249,800,289,835,340,852,397,849,435,815,494,781,526,767,543,728,566,670,586,614,593,521,597,467,590,386,585,309,565,276,554,253,542,228,537,174,503,113,464,76,438,36,416,6,398,4,394" alt="Love" onmouseover="change1()" href="/handheld.aspx" />
<area id="ar2" shape="poly" coords="1990,389,1967,376,1929,373,1879,351,1846,334,1814,308,1786,279,1705,243,1636,220,1549,210,1475,203,1399,204,1331,212,1267,232,1213,268,1179,303,1155,336,1138,390,1138,419,1153,462,1191,510,1226,545,1305,581,1368,593,1448,597,1540,587,1610,586,1674,566,1737,545,1775,530,1841,487,1913,440,1949,416,1968,414,1991,392" alt="Family" onmouseover="change2()" href="/handheld.aspx" />
<area id="ar3" shape="poly" coords="0,849,32,835,73,827,123,806,156,779,188,749,227,723,292,699,358,676,426,667,517,662,609,664,654,671,727,692,770,721,807,755,834,796,850,842,852,880,845,906,814,952,776,993,736,1017,689,1038,635,1051,573,1054,494,1053,435,1045,384,1043,328,1030,272,1013,256,1003,218,993,186,968,149,944,118,924,92,906,66,890,47,878,22,867" alt="Friend" onmouseover="change3()" href="/handheld.aspx" />
<area id="ar4" shape="poly" coords="1987,848,1972,837,1919,826,1868,805,1812,760,1773,728,1668,684,1585,669,1492,661,1385,662,1301,675,1225,712,1178,760,1158,794,1137,853,1143,896,1180,959,1224,1000,1294,1039,1365,1050,1470,1055,1552,1045,1615,1040,1677,1023,1757,996,1815,963,1876,925,1924,890,1969,866,1991,848,1985,850" alt="Colleaque" onmouseover="change4()" href="/handheld.aspx" />
<area id="ar5" shape="poly" coords="0,1305,16,1295,55,1290,109,1266,139,1253,172,1226,208,1193,253,1171,315,1145,388,1128,480,1117,582,1119,644,1124,701,1141,758,1168,808,1211,835,1257,853,1310,847,1359,796,1428,750,1468,713,1487,645,1509,556,1509,493,1509,432,1505,368,1497,317,1482,265,1467,231,1453,187,1429,73,1352,43,1335,21,1326,6,1312" alt="Business" onmouseover="change5()" href="/handheld.aspx" />
<area id="ar6" shape="poly" coords="1987,1302,1960,1293,1914,1281,1865,1262,1815,1222,1777,1191,1692,1154,1614,1130,1520,1121,1409,1117,1331,1126,1280,1145,1216,1178,1177,1225,1159,1251,1140,1302,1138,1323,1145,1358,1174,1409,1222,1456,1263,1481,1330,1503,1373,1510,1463,1512,1539,1503,1606,1500,1667,1485,1707,1476,1732,1460,1771,1449,1827,1412,1909,1355,1980,1319" alt="Educator/Learner" onmouseover="change6()" href="/handheld.aspx" />
<area id="ar7" shape="poly" coords="47,3567,995,3069,1952,3569,1839,3569,1839,3568,1772,3569" alt="Registration" onmouseover="change7()" href="/handheld.aspx" />
</map>
<img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_love_lit.png" />
<img name="image2ch" id="image2ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_family_lit.png" />
<img name="image3ch" id="image3ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_friend_lit.png" />
<img name="image4ch" id="image4ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_clq_lit.png" />
<img name="image5ch" id="image5ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_bus_lit.png" />
<img name="image6ch" id="image6ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_ed_ln_lit.png" />
<img name="image7ch" id="image7ch" style="visibility: hidden; z-index: 0" width="0" height="0" alt="" src="/handheld/images/map/body_interactive_image_reg.png" />
</div>
Here is the top of my HTML code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="/handheld/default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WeConnec</title>
<link rel="stylesheet" href="/handheld/style/index.css" type="text/css" />
<script type="text/javascript" src="/handheld/handheld.js"></script>
</head>
I've replaced the map with images, and reduced the function to its essentials. Notice also that I've removed the height and width attributes from img#image1ch:
function change1() {
var el = document.getElementById('image1ch');
el.style.visibility = "visible";
el.style.zIndex = "100";
el.style.width = "290px";
el.style.height = "auto";
return true;
};
<div id="div4" class="div4">
<img name="maptreebg" id="maptreebg" class="img4" alt="" src="http://placekitten.com/120/120" usemap="#maptree" />
<img src="http://placekitten.com/100/100" onmouseover="change1()" href="/handheld.aspx" />
<img name="image1ch" id="image1ch" style="visibility: hidden; z-index: 0;" alt="" src="http://placekitten.com/140/140" width="0" height="0" />
</div>
Show image in div and add PREV/NEXT buttons
I create kind of gallery in Wordpress. However, posts are listed with plugin (they are attached to map - WP Google Map) and I can't use any gallery plugin. I just upload images and want to add them to div "showimagediv". This works fine but I can't make PREV/NEXT.
This is what it looks like:
$(document).ready(function() {
$('.thumb').on('click', function() {
var img = $('<img />', {
src: this.src,
'class': 'fullImage'
});
$('.showimagediv').html(img).show();
});
$('.showimagediv').on('click', function() {
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_content">
<img src="image1.jpg" class="thumb" />
<img src="image2.jpg" class="thumb" />
<img src="image3.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image4.jpg" class="thumb" />
<img src="image5.jpg" class="thumb" />
<img src="image6.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image7.jpg" class="thumb" />
<img src="image8.jpg" class="thumb" />
<img src="image9.jpg" class="thumb" />
</div>
It works well but doesn't give me option to to PREV/NEXT.
This is untested - but might help you get the idea.
HTML
<div class="nextSelector">
<span>NEXT</span>
</div>
JS
$('.nextSelector').on('click',function(){
var nextImage = $('img.fullImage + img');
$('img.fullImage').toggleClass("thumb fullImage");
nextImage.toggleClass("thumb fullImage");
})
Simple HTML Image Slideshow
I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output
How can i add a preload function for my images?
I saw this solution and i don't understand where is the preload here:
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
On my html file i have this part:
<div id="slideShow">
<img src="Images/radar000025.Gif" alt="slide" />
<img src="Images/radar000203.Gif" alt="slide" />
<img src="Images/radar000251.Gif" alt="slide" />
<img src="Images/radar000267.Gif" alt="slide" />
<img src="Images/radar000283.Gif" alt="slide" />
<img src="Images/radar000284.Gif" alt="slide" />
<img src="Images/radar000301.Gif" alt="slide" />
<img src="Images/radar000539.Gif" alt="slide" />
<img src="Images/radar000556.Gif" alt="slide" />
<img src="Images/radar000571.Gif" alt="slide" />
<img src="Images/radar000588.Gif" alt="slide" />
<img src="Images/radar000589.Gif" alt="slide" />
<img src="Images/radar000794.Gif" alt="slide" />
<img src="Images/radar000810.Gif" alt="slide" />
<img src="Images/radar000811.Gif" alt="slide" />
<img src="Images/radar000812.Gif" alt="slide" />
<img src="Images/radar000813.Gif" alt="slide" />
<img src="Images/radar000814.Gif" alt="slide" />
<img src="Images/radar000830.Gif" alt="slide" />
<img src="Images/radar000831.Gif" alt="slide" />
<img src="Images/radar000832.Gif" alt="slide" />
<img src="Images/radar000833.Gif" alt="slide" />
<!-- #slideShow --></div>
Then in the bottom i'm calling javascript file:
<script type="text/javascript" src="SlideShow.js"></script>
In the SlideShow.js i have the functions of timer and buttons and events.
And last i have a style file Screen.css for all the styling.
What i want to do is to make a preloader for all the images maybe even with a progressBar that show each image loading progress.
I saw some examples and i saw this answer above of the small function but i'm not sure how to use it with my code.
This is my site with the working slideshow but without a preloader:
Slide Show
And this is the SlideShow javascript file and css file: newsxpressmedia.com/SlideShow.js , newsxpressmedia.com/Screen.css
Maybe using ajax for the preloading is better not sure.
Hope this might help you . Try this
#charset "utf-8";
/* Preloader */
#preloader {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- Your Website Content -->
<div>
This is your website content
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" />
</div>
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
})
//]]>
</script>
</body>