|
JavaScript - Picasa Web Album Images
Hi all,
I found a small code that displays (x) amount of thumbnails from the latest uploads to my Picasa Web Album. The thumbnails themselves are links which bring you to the image in the Web Album. What I would like to do instead, is have it link directly to the image so that I can have the thumbnails open the image in a lightbox or something. Here is the code. The red text is what makes the thumbs hyperlinks. Code: <script src="http://bloggerbuster-tools.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j.getJSON("http://picasaweb.google.com/data/feed/base/user/115324847528111351560?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",
function(data){
var thumbCount = 16;
var smallThumb = 0;
var mediumThumb = 1;
var largeThumb = 2;
var picsCount = data.feed.entry.length - 1;
for (var i = picsCount; i > picsCount - thumbCount; i--) {
var pic = data.feed.entry[i];
$j("<img/>").attr("src", pic.media$group.media$thumbnail[smallThumb].url).attr("alt", pic.summary.$t).appendTo("#picasaStream") .wrap("<a href=" + pic.link[1].href + " target='_blank'>") ;
}
});
});
</script>
<div id="picasaStream"></div>
Thanks for the help! Similar TutorialsHey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
if the elements have name attributes with the same value, according to legacy DOM, it will return an array of those elements if you access the name property of 'document'. However, this doesn't apply to img elements. If the HTML code is as follows: Code: <img src="img/a.jpg" name="pic" /><img src="img/b.jpg" name="pic" /> <form name="pic">a</form> <form name="pic">b</form> then document.forms["pic"] (return an array) <-- as expected document["pic"] or document.pic (return an array) <-- as expected document.images["pic"] : in IE -- it returns the last image in FF -- it returns the first image ~~OMG~~ any idea? thx in advance. Good afternoon I am trying to make a form and keep getting stuck on one thing, don't know if JavaScript is the way to go so any advise would be helpful. basicly i have a form giftcert.html -that has text input boxes the user fills in and a link to the next page for the user to pick a gift card giftcards.asp -the user picks a gift card by radio buttons (over 100)grouped by name and then pushes a button to take them to the next page passing the value of the radio and image (here is the issue) giftcert.asp -this page displays the text boxes from the first page with the value already present (used asp to achieve) and the value of the radio button (a stock number - used asp to achieve) and i want a sample of the image attached to the stock number. how do i pass the image attached to the radio button from giftcards.asp to giftcert.asp i don't know where i am going wrong a) how do i attach the image to the button do i use an onclick="pass src" and how b) how do i get the image to show up in giftcert.asp I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
http://visualslideshow.com/ I want the code for the pictures slideshow that is used in the above link. Help me out! is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu. <head> Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
<body> Code: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p><select name="picture" size="1" onChange="showimage()"> <option selected value="image1.jpg">Option 1</option> <option value="image2.jpg">Option 2</option> <option value="image3.jpg">Option 3</option> </select></p> </form> What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus. For example: Drop down menu number 1 Shoe Color: Black or Red Drop down menu number 2 Shoelace Color: White or Brown Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces. Code: <body>
<center>
<script type="text/javascript">
var imageSrc = ['<img www.mysite.com/subfolder/001.jpg></img>','002.jpg','003.jpg',
'004.jpg','005.jpg','006.jpg'];
var imageSrc2 = [];;
function copyRandom(){
if (0 == imageSrc2.length) {
imageSrc2 = imageSrc.concat();
}
var randNum = (Math.random()*imageSrc2.length) | 0;
return imageSrc2.splice(randNum, 1);
}
</script>
<!-- <button
onclick="document.getElementById('xx').innerHTML = (copyRandom());"> -->
<button
onclick="document.getElementById('xx').innerHTML = (copyRandom());">
Draw A Card
</button>
<div id="xx"></div>
<!-- <div id="xx"></div> -->
</center>
</body>
Why are my images broken in this script? Specifically "<img www.mysite.com/subfolder/001.jpg></img>" as the rest are just placeholders until I solve the first one. Hello guyz! I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images: Code: /*
* How to search for images and restrict them by size.
* This demo will also show how to use Raw Searchers, aka a searcher that is
* not attached to a SearchControl. Thus, we will handle and draw the results
* manually.
*/
google.load('search', '1');
function searchComplete(searcher) {
// Check that we got results
if (searcher.results && searcher.results.length > 0) {
// Grab our content div, clear it.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
// Loop through our results, printing them to the page.
var results = searcher.results;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = document.createElement('div');
var title = document.createElement('h2');
// We use titleNoFormatting so that no HTML tags are left in the title
title.innerHTML = result.titleNoFormatting;
var newImg = document.createElement('img');
// There is also a result.url property which has the escaped version
newImg.src = result.tbUrl;
imgContainer.appendChild(title);
imgContainer.appendChild(newImg);
// Put our title + image in the content
contentDiv.appendChild(imgContainer);
}
}
}
function onload() {
// Our ImageSearch instance.
var imageSearch = new google.search.ImageSearch();
// Restrict to extra large images only
imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
// Here we set a callback so that anytime a search is executed, it will call
// the searchComplete function and pass it our ImageSearch searcher.
// When a search completes, our ImageSearch object is automatically
// populated with the results.
imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
// Find me a beautiful car.
imageSearch.execute("Subaru STI");
}
google.setonloadCallback(onload);
But all I could find about restricted images sizes is this: Code: imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me... Google API reference says that: Code: google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows: * google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons * google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images * google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images * google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images Those who wants to play whit Google Playground, this is the link: Code: http://goo.gl/sPs2 Could some one help me get that images whit fixed sizes? Folks I'm so in the dark about this that I couldn't even think of a sensible title for the thread! One of my colleagues reckons that some years ago she worked on a website that contained images that were set to be visible to users only between certain dates (different dates for different images, so an image representing January would be visible only during January, and so on). Does this sound like something familiar? If so, would it be done using Javascript? Thanks Remster Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz
i've been having some trouble with showing images and i think it's a problem with the image source, i would like to know how i must alter my code to fix this thnx. i should also point out that the images are the 6 sides of a dice Code: <html>
<head>
<title>My Script</title>
<script type = "text/javascript">
if (document.images)
{
image1 = new Image(10,10);
image1.source = "d1.gif";
image2 = new Image(10,10);
image2.source = "d2.gif";
image3 = new Image(10,10);
image3.source = "d3.gif";
image4 = new Image(10,10);
image4.source = "d4.gif";
image5 = new Image(10,10);
image5.source = "d5.gif";
image6 = new Image(10,10);
image6.source = "d6.gif";
}
alert(image1);
alert(image2);
alert(image3);
alert(image4);
alert(image5);
alert(image6);
</script>
</head>
<body>
</body>
</html>
hi all, i wanna make a 3d cube made of images (like this one: http://www.petitpub.com/labs/media/flash/3dcube/). it should rotate by itself randomly in various directions and stop on demand. does anyone know where to find a prototype or tutorial for that? thanx, I have a page where I have a image displayed and 3 buttons underneath the image. The image displayed is the outdoor tool "hoe". I have the buttons named saw, hoe and tree trimmer below the image. What I want to do is when the user of the web page clicks a button, let's say for example tree trimmer the new image will appear on the page in place of the old image. Right now my code is messed up, it does not matter what image you click but only a image of a saw appears. Also I cannot get my image centered correctly. Does anyone have any suggestions to help me? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img.shown {display: block; margin-left: auto; margin-right: auto; } </style> </head> <h1 style="text-align:center">A simple slide show</h1> <script> function pictureChange() { document.getElementById("shown").src="/tools/saw.jpg"; } </script> <body> <img id="shown" src="/tools/hoe.jpg";> <p><input type="button" id="theButton" value="Saw" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Hoe" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Tree Trimmer" onclick="pictureChange()"> </p> </body> </html> *** I have tried this code snipet below and it does not work for me because I don't know the actual url, the images are uploaded to a server.*********** function pictureChange(imgurl) { document.getElementById("shown").src='/tools/' + imgurl + '.jpg'; } Hi, I'm trying to put a script in my code which when an image is clicked in the webpage, i'd like it to go through the array from index 0,1,2,3, displaying the images as the current picture is clicked. Once at the end of the array, i'd like it to return to the first index (0) and do the same again. In effect, i'm trying to create a gallery of images for users to click through. I have this code, now it loads up fine, the first image loads, when I click the image, the image in index[1] loads, but when clicked again, it returns to index[0] then the same happens over and over. My code: Code: <script type="text/javascript">
var myImages = new Array()
myImages[0] = 'images/homePic.png';
myImages[1] = 'images/pinkWall.png';
myImages[2] = 'images/wendy.png';
myImages[3] = 'images/horizon.png';
function imgChange(that)
{
var index = 0;
while (that.src.indexOf(myImages[index]) != -1)
{
myImages[index] = myImages[index++];
}
that.src = myImages[index];
return false;
}
</script>
HTML: Code: <img src="images/homePic.png" id="pic" alt="homePic" name="bGarden" height="344px" width="490px" onclick="return imgChange(this)" /> Any advice will be greatly appreciated, thank you. |
|||||||