CSS/Javascript Lightbox - javascript

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.

Related

How to send a image to another page using phonegap

I am very new to using HTML, CSS and JS etc in Phone gap.
I have no idea how to approach this problem. i have done some research but it doesn't make sense to me.
I have a page of small symbols
<img src="img/car.png" alt="car">
<img src="img/lorry.png" alt="lorry">
<img src="img/house.png" alt="house">
When the user clicks one of these symbol I want the image to be sent to the large symbol page where it will show the symbol enlarged.
If the user goes back and chooses another symbol i want it to overwrite this image.
how can i code this into my application?
I initially thought i could create a enlarged symbol page for each symbol but this would mean there would be over 300 pages. Therefore why im trying to figure out how to use one enlarged symbol page which all the symbols can be enlarged and seen on.
You can add a query string parameter to your links
<img src="img/car.png" alt="car">
<img src="img/lorry.png" alt="lorry">
<img src="img/house.png" alt="house">
Then on largeSymbol.html you can use the URI.js library to read the query string and act accordingly, maybe something like this
<img id='big-image' src='' />
<script src='https://code.jquery.com/jquery-2.2.0.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.js'></script>
<script>
var querySrc = URI( window.location.href ).search( true ).src;
$("#big-image").attr( "src" , querySrc );
</script>

Lightbox images are all black and white

For a while now I've been working on a rather simple website for myself.
I wanted to add a Lightbox since I thought it would suit the design, but I made a mistake in the process. Since I chose to use black and white images I decided to use the grayscale function. Now all the Images that I view with my Lightbox are black and white.
This is the Lightbox I use:
http://lokeshdhakar.com/projects/lightbox2/
This is a small but very important piece of my html:
<a href="img/Baking-Lightbox.jpg" data-lightbox="Baking" img src="img/Baking.jpg" data-title="My caption">
<img src="img/Baking.jpg">
</a>
can anybody tell me what I did wrong
Thank you in advance
According to how you implement this lightbox and based on the code you put into your HTML, it seems as though you have implemented the lightbox incorrectly. First, inside the head tag of your HTML, make sure that you include the CSS and links to the javascript files as follows:
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
Once you have included those files, you should add images to you HTML using the following format ONLY:
Image #1
Replace "img/image-1.jpg" with the path to your image.
Replace "image-1" with any name that you would like to group your images together with. Make sure that any images that you would like to show together have this same value.
Replace "My caption" with what you would like to appear as a caption in the lightbox.
Replace "Image #1" with something that you would like to have appear in the HTML.
You can add as many anchor (a) tags as you need for each image.
Example
In the following example, I have two lightbox groups. One will show cars, and the other will show animals:
FROGS
DOGS
My SUV
A Toyota Camry

Fading Images with links

I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});

Multiple changeImage Instances

Hopefully someone can help me. I'm using a JS image compare script which shows two images to be shown side by side and the user can compare them. It works like this:
<div id="container1">
<!-- The before image is first -->
<img id="img" src=" http://placehold.it/400x200&text=1" />
<!-- The after image is last -->
<img id="img-alt" src="http://placehold.it/400x200&text=2" />
</div>
The script pulls the first img as the left image, and the second img as the right image. I've added two IDs because I've set up buttons and I'd like them to changeImage on either side so the two images aren't static, and multiple images can be selected and compared from a thumbnail gallery (per the user's selection).
I found some code on here, which will affect the left side just fine. I've also added a button that will allow the left side to be changed.
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
And the HTML:
Left side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Left" );'>Left</button>
<button onclick='changeImage( "http://placehold.it/400x200&text=Left2");'>Left2</button>
Now, I'd like to create another set of buttons that affects the "img-alt" class as shown in the slider HTML - this would affect the right side. I have somewhat limited knowledge with Javascript, and if I add another script with "document.getElementById("img-alt").src=a;" nothing changes on the right side. Basically, I'd like buttons that affect the right side like so:
Right side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("http://placehold.it/400x200&text=Right2");'>Right2</button>
How can I associate these buttons to affect the 'img-alt' ID (second image)?
I hope this makes sense. Please let me know if I need to clarify anything.
Thanks!
I'm not quite sure that it is what do you expect but please take a look at example I've made -> jsfiddle
changeImage = function(elemId, source) {
document.getElementById(elemId).src=source;
}
<button onclick='changeImage("img-alt", "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("img", "http://placehold.it/400x200&text=Left" );'>Left</button>

Onclick view large image javascript or CSS3

I have code something like this
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
When we click on view large image link , Image should be display large and not disturb other images location.
http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip
PART 1 - GET SETUP
1.Download and unzip the Lightbox from above.
2.Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
3.Look inside the css folder to find lightbox.css and load it from your html page:
<link href="css/lightbox.css" rel="stylesheet" />
4.Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
------------------------------------------------------------------------------------------
PART 2 - TURN IT ON
1.Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
image #1
Optional: Set the title attribute if you want to show a caption.
2.If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
image #2
image #3
image #4
I am usually using the fancybox jQuery plugin for these purposes. You can use the old free 1.34 version for simple purposes too, no need for pro license. You can also find a lot of examples etc. on the linked site.

Categories

Resources