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.
Related
I have an HTML and JavaScript mixed code snippet which is using a plugin called magicbox 360 toolkit, but it won't take more than 30 images even when there are many pics present in the folder. I tried their documentation; nothing seems to work.
<div class="app-figure" id="zoom-fig">
<!-- <a id="spin-1" class="Magic360" data-options="rows:55; columns:55"-->
<!-- href="images\armani-bag\armani-bag-small-01-01.jpg">-->
<!-- <img src="images\armani-bag\armani-bag-small-01-01.jpg"></a>-->
<!-- <a id="spin-1" class="Magic360" data-options="rows:55; columns:55 "> <img src="images\armani-bag\p-01.jpg"></a> -->
<a class="Magic360" data-options="filename:p-01-{row}-{col}.jpg; rows:4; columns:12;"><img src="images\armani-bag\p-01.jpg""/></a></div>
In your code, the first spin image is p-01.jpg. This does not match the filename descriptor, which is p-01-{row}-{col}.jpg.
Without knowing the file names of your images, I guess the answer is:
Either the descriptor should be p-{col}.jpg.
Or the first image should be something like p-01-01-01.jpg.
What are the file names of your images?
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
I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?
Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.
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.
I have html img list like this one:
<img src="over.png" width="150" heigh="72" />
<img src="2_over.png" width="150" heigh="72" />
<img src="3_over.png" width="150" heigh="72" />
but these images are quite large. I need to make it that it will load one by one "like ajax". But I cant load it from javascript in the begining, becouse it is our cms desing like that and we will have big troubles if i will change it. So what i am planning to do is:
<img src="" width="150" heigh="72" path="over.png" />
and load it one by one with javascript and replace src, but the html will not be valid. Can any one give me any solution how to implement it with valid html?
If putting the data somewhere is your sole problem, HTML5 supports data- attributes, which let you add arbitrary attributes to elements. It remains valid as long as the attribute name starts with data-. For instance:
<img src="" width="150" height="72" data-path="over.png" />
This feature, while not "valid" HTML4, should still work on all browsers as unknown attributes on tags are simply ignored (and kept as is).
Though, you may also search for a way to do it only with JavaScript. I don't really understand how dynamically adding images could break your CMS.
Also, the alt attribute is required for images (make it blank if you don't have anything useful to write instead), and I'm not sure a blank src attribute is valid (you may want to put a loading image's path instead).
set a valid url in the image before you call the javascript function, for instance like this:
<img src="blank.gif" alt="Blank Image" width="10" height="10" />
And as for the "path" attribute, you could put the link to the image in the alt attribute. That way your image tag will be valid.
<img src="blank.gif" alt="myImage.jpg" width="10" height="10" />
Then you can use javascript to fetch the image path from the alt attribute, and insert it in the src attribute when loaded.
Those images should be thumbnails, correct? So you're downscaling large images via HTML to small sizes. The best way would be, honestly, to provide already downscaled images as thumbnails.
One solution is to have a small image loading image and set that as the source for all the images until your javascript has loaded the relevant image.
<img src="loading.png" data-path="over.png" height="50" alt="Over" width="150">
You may want to check out JAIL, the jQuery Asynchronous Image Loader:
While it may be slightly more than what you need, its got lots of options available and its less code you have to write!