I'm trying to figure out how to open all of the images within a div in a lightbox. The div is pulling images from a picasa album, so I can't edit each link individually.
What would also work for me is the ability to open all links of a certain filetype in a lightbox.
Thanks!
Try the pretty gallery which meets your requirement.Demo for photo gallery.
I have create a enlarge button on the photo gallery of the pikaChoose by clicking the button i display the gallery in light box. The code for display from pikaChoose is
jQuery(".pika-stage #enlarge a").live('click',function(){
jQuery.fn.prettyPhoto();
jQuery.prettyPhoto.open(api_gallery,api_titles,api_descriptions);
return false;
});
I hope this may be useful to you
You can use lightbox: http://lokeshdhakar.com/projects/lightbox2/
For example (first three lines in head - be sure to have the images like close button in imgs folder):
<script src="jquery-1.11.0.min.js"></script>
<script src="lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Image #2
Image #3
Image #4
Since you're using picasa, change the href to the appropriate link to the image. If you're using php, then use for loops with echo, etc...
Related
Good Afternoon, I created a banner ad in HTML5 using div containers and css3 animation. I submitted my banner to who i needed to submit it to and they responded they want a gif file. I'm a little confused as to what they need. how do i convert the html5 to a gif. It seems they're following XAXIS/Google ADX criteria. I know that they do not actually want an animated gif, but are looking for a backup of sorts. Never dealt with this type of stuff so your help is greatly appreciated. Here's the documentation:
Initial Load - 200kb
Secondary Load
Max Additional Load - 1 MB
Max number of file requests – 15
Backup static image must be supplied separate from the HTML5 zip for trafficking
DCM doesn’t accept HTML files which are made using the SWIFFY tool
HMTL must include at least 1 clickTAG (See Below for the clickTag supported by DCM)
<html>
<head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type='text/javascript'>
var clickTag = 'https://www.google.com';
</script>
</head>
<body>
[The rest of your creative code goes here.]
</html>
Please ensure that your creative uses the clicktag variable as the click-through URL:
<a href='javascript:window.open(window.clickTag)'>
<img src='images/dclk.png' border=0>
</a>
</body>
</html>
All banners require a static backup gif (or jpg, or png) that displays when the animated version fails to load. If you don't have a Photoshop layout to make a static version from you can do this:
Run the banner locally in your browser
Take a screenshot of the frame you want for the static version
Crop the image down to banner size & save as gif, jpg, png or whatever
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.
I'm extremely confused and I've been trying to do this for a while. This is just for a simple tumblr theme. I'm trying to make it so viewers can click a link and when it's clicked, the background image of the page switches.
This is the page, eiramanaik.tumblr.com
The background image is shown, and when clicked, I want it to change to this: http://i50.tinypic.com/23lz49h.jpg
I've looked through everything, and even if I understood the coding, I didn't understand how to apply it, as I am very new to html in general.
Please help!
if you want to use jquery is: (first you have to put id into your link as id="link")
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(){
$('#id_background').attr('src','23lz49h.jpg');
});
});
</script>
What is the best way to show along with an image a comment form, comments and other image related information with colorbox? Like in facebook's profile photos bar images?
Just opening an image node in colorbox like 'node/196?iframe=true' is much slower than opening an image.
the inline config parameter would be one solution
<style type="text/css">
.hide-colorbox{display:none}
#cboxLoadedContent .hide-colorbox{display:block}
</style>
$(".example8").colorbox({inline:true, href:"#inline_example1"});
<div id="inline_example1" class="hide-colorbox">
<p><strong>This content comes from a hidden element on this page.</strong></p>
</div>
You can either output the required html on page load and then hide with css, or you can create the content based on the page layout.
How to show loading image when a big image is being loaded?
As an example in Orkut when viewing a photo in user photo album there is a loading image shown over the photo until the Photo is completely loaded.
I need to implement that feature.
My question is how implement that feature?
Is it possible without using JQuery?
Please help.
Wrap your image in a div (or whatever you want) and set it's background image to be an animated gif or whatever loading image you want. When the image finishes loading it will cover up the background image. Easy and can be reused wherever you want.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Here's a basic technique that you can expand upon to do more elaborate stuff with
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById( 'test' ).src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Edit: Apparently, this has been deprecated. Nothing to see here, move along.
No JavaScript or CSS is necessary for this. Just use the built-in, but seldom heard-of, lowsrc property for img elements.
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
The basic idea is that you create an additional very compressed, possibly black and white version of your normal image. It gets loaded first and when the full resolution image is downloaded, the browser replaces it automatically. The best part is you don't have to do anything.
Check it out here: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
You could use the jQuery Lazy Loading plugin. It allows you to specify a loading image and delays the loading of large images until they are scrolled into view.
Time ago I made something like this for a similar problem:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
I think this approach has some useful advantages:
The loading image is hidden. Imagine your big image isn't so big as you expected...
You are able to do some extra things in javascript function. In my case, I stretched image width, height or both, depending on its size.