I'm attempting to make it so that the images on my web page when clicked, will show a fullsized image. However, my javascript doesn't seem to be happy with what I have in my fiddle.
I have to use the source of the image due to my images being linked to a pagegridview in ASP.Net, and I have it linked to a property I called imgFull. The code on the fiddle is for testing, my actual code is below:
CSS:
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
Javascript:
$("img").click(function(){
$("#imgBig").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
HTML in ASP.NET:
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent">
<asp:Image runat="server" ID="imgFull" ImageAlign="AbsMiddle" Width="400" ImageUrl="https://www.google.com/images/srpr/logo11w.png" CssClass="imgBig"/>
</div>
Javascript is not my forte, as soon as this project is over I intend on taking some time to learn it but at present, I have to go with the "Drink from a fire hose" approach and hope I can retain what I'm using. Any assistance is appreciated.
You had a typo:
$("#imgSmall").click(function(){
$("#imgBig").attr("src"; $(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
The semicolon in your assignment to src should be a comma:
$("#imgSmall").click(function(){
$("#imgBig").attr("src", $(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
One of the first things you should learn is to use your browser's developer tools. Chrome has wonderful tools baked in (Hit F12), but Firebug for Firefox is also great for Javascript debugging.
Related
quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.
I've programmed a small lightbox for viewing images on my website. To keep the loading process fast I would like to "lazy load" the fullsize image. At the moment browsers always load the preview (test.jpg?size=520px) and the fullsize image (test.jpg).
Is there any simple solution to prevent browsers from loading the fullsize image until the image is clicked?
The website is only using minimal javascript - but I found no "no javascript" solution. Additionally I prefer a solution that doesn't require large html strings inside the .js file that will be added on mouse click.
Most lazy load scripts change only the attribute key inside the image tag. However, with HTML 5 this is now longer a useful approach. Maybe it is possible to change the <picture> tag (<picture> <<>> <picture-disabled>) and prefetch the full size image?
HTML:
<div class="imagecc">
<picture onclick="lightboxshow('test004.jpg')">
<source type="image/webp" srcset="test004.webp?size=520px">
<img src="test.jpg?size=520px" alt="...">
</picture>
<p class="imgcaption">...</p>
</div>
<div id="test004.jpg" class="imageccbox" onclick="lightboxclose(this)">
<div class="imageccboxpicture">
<picture>
<source type="image/webp" srcset="test004.webp">
<img src="test.jpg">
</picture>
</div>
</div>
CSS:
.imageccbox {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
text-align: center;}
.imageccbox:target {
background: rgba(255,255,255,0.8);
display: block;
outline: none;}
.imageccbox:target > .imageccboxpicture {opacity: 1.0;}
.imageccboxpicture {
margin-top: 5%;
opacity: 0.4;
transition: opacity 500ms linear;
cursor: none;}
JavaScript:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;}
Consider using the <template> element. It's just a part of web components.
Essentially you stuff any content in <template> that you do not want the browser to load, and then move the content when you want it to be loaded. You make that change onload, or onclick, or whatever other event you like. Either way, it's not a lot of JavaScript to do and you don't need any libraries.
Take a look at this tutorial: Quick trick: using template to delay loading of images.
Older browsers that don't support the tag just won't get the lazy load benefit, so there is a nice progressive enhancement bonus there as well.
Another reference: http://webcomponents.org/articles/introduction-to-template-element/
As Charlie said, the only way to do this is with JavaScript.
One solution is to remove the src attribute from the <img> tag and only add it when the image is clicked:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
var img = imageccbox.getElementsByTagName('img')[0];
img.setAttribute('src', 'test.jpg');
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;
}
Edit: please see aardrian response as that template solution seems way more interesting!
I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:
http://pixelcog.github.io/parallax.js/
I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:
<div class="home-img">
<img src="/images/try.jpg" alt="">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
</div>
.home-img {
/*position: absolute;
max-width: 100%;*/
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.home-img img {
width: 100%;
position: absolute;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.
Does anyone have any idea what I am doing wrong?
This can be seen on my site, here:
Click here
You forgot to load the Parallax.js library,
change to line:
<script src="/path/to/parallax.js"></script>
to
<script src="/parallax.js-1.3.1/parallax.js"></script>
now the script will work.
But the "home-img" div will need to look like this:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
This way you will be able to see the effect.
If you will keep the image it will be above the effect.
EDIT
I would recommend you use the browser inspect tools.
This way you can see if all of the javascript loaded currectly.
In your case the console tab in the inspect tool showed the error:
http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)
For chrome use this tutorial:
https://developer.chrome.com/devtools
For firefox use this tutorial:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
I'm terrible at javascript and css, but I did manage to implement the Jquery Cycle plugin into my homepage. I tried to add thumbnails, so while it's still cycling on auto, the end-user can click a thumbnail to go back, instead of having to wait 8 or 9 slides later.
javascript code:
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
// dynamically add a div to hold the slideshow's pager
$(".homepageimages").before('<div class="pager"></div>');
// now to use the cycle plugin
$(".homepageimages").cycle({
pause: 1,
pager: ".pager"
});
}
</script>
HTML code:
<div id="slideshow">
<div class="homepageimages"
<asp:Hyperlink ID="HyperLink1" runat="server"
ImageUrl="~/images/usshomepagegraphic.jpg" height="319" width="864"
NavigateUrl="~about.aspx" Target="_self"></asp:HyperLink>
<asp:Hyperlink ID="HyperLink4" runat="server"
ImageUrl="~/images/collage.jpg" height="319" width="864"
NavigateUrl="~services.aspx" Target="_self"></asp:HyperLink>
</div>
</div>
css:
.slideshow {
height: 319px;
width: 864px;
padding: 0;
margin: 0;
}
.slideshow img {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 864px;
height: 319px;
top: 0;
left: 0
}
Here's a photobucket link to what I'm looking at. The picture is of my cycler, and the pager link is in the upper left -- just text numbers 1-7, for all 7 slides:
http://s1209.photobucket.com/albums/cc387/jdluski/?action=view¤t=jquerythumbnails.png
But I cannot turn these text numbers into thumbnails. Whenever I try, from the Jquery Cycle's instructions or some other persons's online instruction, usually the pictures just end up right on top of one another, or I get a long, huge error message in my browser.
I'd like to continue cycling on auto, but have thumbnails in case the end user wants to go back, but I'm at an impasse. I'm to the point now where I'm so confused, I don't know what to even try to tinker with, the jquery.cycle.all.js file, the javascript, the css, the html.
Thanks a bunch for reading this, and all help would be sincerely appreciated!
Jason Weber
As you are not good at JS try using this plugin which is ready to serve your purpose.
http://wayfarerweb.com/jquery/plugins/simplethumbs/
It has ready thumbnail option.
Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.