|
JavaScript - Multiple Albums Smooth Gallery
Hi there.
I'm using JonDesign's SmoothGallery v2.1beta1 and would like to have the album navigation side-by-side with the image display. With css I can almost achieve this, except that the album list disappears after clicking. A JS function is changing the opacity but can't figure out how to change this. Don't know JS and everytime I try to change anything the gallery stops working. Can anyone help? Thanks in advance. ----------------------------------------- GALLERY SCRIPT http://smoothgallery.jondesign.net/download/ ----------------------------------------- EXAMPLE http://www.script-tutorials.com/demos/52/index-2.php Similar TutorialsHi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message. The java script code is below: Code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>
</head>
<body>
<div align="center">
<div id="gallery"> <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" /> <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" /> <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" /> </div></div>
<script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 540, height: 540 }); </script></div>
</body>
</html>
I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is: http://www.raisingsistersconference....togallery.html Thanks so much. Hi all, I am building a website with a smooth scroll function... that site is: katielipsitt.com/website As you will see if you click the menu links, the page scrolls too far up. I would like each div to stop right below the navigation. I am not very familiar with javascript, so I am wondering where in the code I would put this? I imagine I'll be able to put in something to tell the page to "scroll to Div'X' but leave 150 pixels of padding at the top" Is that possible? Thanks!! Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??
Hi. I'm using a tooltip javascript from this website: http://sixrevisions.com/tutorials/ja...cript_tooltip/ This is what it looks like when it's working smoothly: http://sandbox.leigeber.com/tooltip/ To fix scrolling issues, I changed (near the lower bottom, under "pos:function(e)"): var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; to: var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; I'm using these tooltips for an image map that has 1,000 defined areas. In Firefox, everything works very smoothly. Everything works well and looks smooth/visually pleasing. But in IE, the tooltips are "choppy" and "staticy". They work well when I continuously move my mouse over the image map without stopping. But when I completely stop the cursor on a part of the image map for about 1 full second, and then move my mouse, the tooltip stays where it is even though the mouse has moved. It then takes between 1 - 2 seconds for the tooltip to "catch up" and move to be next to the mouse/cursor - where it is supposed to be. Also, I must note that when I only have a few (like 3 or 4) defined areas for the image map, the tooltip works perfectly fine and smoothly in IE. I'm very new to html and javascript, and so I'm finding myself at a bit of a loss as to why this is occuring. Can anyone offer any help as to how I can make this tooltip go smoothly between defined areas (not sure if that's the correct terminology) of the image map? I'm new to javascript, and so, unsure of which parts could be causing the problems. However, I think it might have to do with the part from pos:function(e) on. If needs be, I'd be happy to post the full javascript code. Code: pos:function(e){
var u = ie ? event.clientY + document.getElementById('bodyid').scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
}
the following script works great in Chrome. very smooth... but in Firefox and IE it is very jittery/jumpy from 0 to 100 opacity too quickly... Code: function changeFadeLevel(newval){
document.getElementById("redbg").style.opacity=newval/100;
document.getElementById("redbg").style.filter = "alpha(opacity=" + newval + ")";
}
function changeBg(state){
if(state==1){
for(var i=0; i<=100; i++){
setTimeout("changeFadeLevel("+i+")",i*3);
}
document.getElementById("overlaystatus").value='on';
}else{
for(var i=0; i<=100; i++){
setTimeout("changeFadeLevel("+(100-i)+")",i*3);
}
document.getElementById("overlaystatus").value='off';
}
}
Code: <input type="hidden" id="overlaystatus" value="off" /> <img src="/bg.jpg" id="bg" border"0" /> <img src="/redbg.jpg" id="redbg" border="0" /> the images are 1596x1057 resolution stretched to 100% width with css Code: html, body {
height: 100%;
margin: 0;
padding: 0;
background:#000;
font-family:Arial, Helvetica, sans-serif;
}
img#bg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
img#redbg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
opacity:0.0;
filter:alpha(opacity=0);
}
$(function() { // HIDING THE CLASS $(".ad-nav").css("opacity","0.0"); // ON MOUSE OVER $(".ad-nav").hover(function () { // SET OPACITY TO 100% $(this).stop().animate({ opacity: 1.0 }, "slow"); }, // ON MOUSE OUT function () { // SET OPACITY BACK TO HIDE $(this).stop().animate({ opacity: 0.0 }, "slow"); }); }); I am hiding a Div and showing it on mouse over. Fade Animation is smooth on Safari but a bit choppy FF. Can anyone come up with a solution to make it run smoothly on both? thanks. Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Dear Friends, I have a javascript image gallery in my website.. it is working Good.. But now i have some problem... i have to get the Loaded image url. i need users to post comments about that image. So i have to get the URL or name of image. This is needed in a text input field... So please see the code of gallery and help me.. The code is below.. Or Check it here http://www.home-palettes.com/gallery.html Code: //add thickbox to href elements that have a class of .thickbox
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
return false;
});
$("a.thickbox").css({display:"inline"});
}
function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
var images_location = 'extensions/thickbox_2'
try {
if (document.getElementById("TB_HideSelect") == null) {
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
}
if(caption==null){caption=""};
$(window).scroll(TB_position);
TB_overlaySize();
$("body").append("<div id='TB_load'><img src='"+images_location+"/loadingAnimation.gif' /></div>");
TB_load_position();
if(url.indexOf("?")!==-1){ //If there is a query string involved
var baseURL = url.substr(0, url.indexOf("?"));
}else{
var baseURL = url;
}
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'> <a href='#'>Next ></a></span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>< Prev</a></span>";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = TB_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
if (!(TB_PrevHTML == "")) {
function goPrev(){
if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}
$("#TB_prev").click(goPrev);
}
if (!(TB_NextHTML == "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}
$("#TB_next").click(goNext);
}
/*
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == "")){
document.onkeydown = "";
goNext();
}
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == "")){
document.onkeydown = "";
goPrev();
}
}
} */
TB_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(TB_remove);
$("#TB_window").css({display:"block"}); //for safari using css instead of show
}
imgPreloader.src = url;
}else{//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = TB_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
if(url.indexOf('TB_iframe') != -1){
urlNoQuery = url.split('TB_');
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='TB_showIframe()'> </iframe>");
}else{
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}
$("#TB_closeWindowButton").click(TB_remove);
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
TB_position();
if(frames['TB_iframeContent'] == undefined){//be nice to safari
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
$(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
}
}else{
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
});
}
}
$(window).resize(TB_position);
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}
} catch(e) {
alert( e );
}
}
//helper functions below
function TB_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}
function TB_remove() {
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
$("#TB_load").remove();
return false;
}
function TB_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_window").css({width:TB_WIDTH+"px",left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)+"px" });
}
function TB_overlaySize(){
if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
yScroll = window.innerHeight + window.scrollMaxY;
xScroll = window.innerWidth + window.scrollMaxX;
var deff = document.documentElement;
var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
xScroll -= (window.innerWidth - wff);
yScroll -= (window.innerHeight - hff);
} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
xScroll = document.body.scrollWidth;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
xScroll = document.body.offsetWidth;
}
$("#TB_overlay").css({"height":yScroll +"px", "width":xScroll +"px"});
$("#TB_HideSelect").css({"height":yScroll +"px","width":xScroll +"px"});
}
function TB_load_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_load")
.css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
.css({display:"block"});
}
function TB_parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
function TB_getPageScrollTop(){
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset) {
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){ // Explorer 6 Strict
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft,yScrolltop)
return arrayPageScroll;
}
function TB_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
arrayPageSize = new Array(w,h)
return arrayPageSize;
}
Hey all, I'm designing a website and i'm doing a section on a portfolio of artwork. wat i would like is to group the work under different headings and for each group to have a thumbnail of an image. when that image is clicked a window is opened which displays all the works in that group as thumbnails as well as an image gallery (larger image of the current image and being able to click on the other thumbnails to view a larger image of it). hope that makes sense. I've been searching all over for scripts bit nothing fits my criteria exactly. going a bit crazy over this, any help or direction much appreciated. peace Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? Hello, Any suggestions for how to make this sort of gallery - http://www.timsimmons.co.uk/index.php ? I am making a website for a friends degree show and really like the minimal aesthetic. I'm not a fan of the usual JS plugin galleries. One thing I can't work out how they have done is link the text caption above to the images. This has been niggling at me for days! I am new to JS so please go easy on me. Cheers, Andy Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working. the javascript code is this: Code: $(function () {
var imgContainers = $('div.tabs > div');
imgContainers.hide().filter(':first').show();
$('div.tabs ul.number_nav a').click(function () {
imgContainers.hide();
imgContainers.filter(this.hash).show();
$('div.tabs ul.number_nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
the html file is this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>gallery</title> <!--CSS--> <link href="style.css" rel="stylesheet" type="text/css" /> <!--JavaScript--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="code.js"></script> </head> <body> <div id="gallery"><!--IMG CONTAINER START --> <div class="tabs"> <div id="image_01"> <div class="image"> <img src="image_one.png" width="795" height="395" /> </div> </div> <div id="image_02" > <div class="image"> <img src="image_two.png" width="795" height="395" /> </div> </div> <div id="image_03"> <div class="image"> <img src="and_so_on.png" width="795" height="395" /> </div> </div> <ul class="number_nav"> <li><a href="#image_01">01</a></li> <li><a href="#image_02">02</a></li> <li><a href="#image_03">03</a></li> </ul> <ul class="prev_next_nav"> <li><a href="#">Previous</a></li> / <li><a href="#">Next</a></li> </ul> </div> </div> </body> </html> here is the zip file: http://www.sendspace.com/file/we3lkd can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript... I've tried hosting my WIP website to see how it works. Everything goes well except for the following: On my Portfolio page: [Portfolio] I have coded a "gallery" in jquery. When the page starts loading it seems that the browser loads the ` Code: #portfolioSlider ` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading. How can I make the ` Code: #portfolioSlider ` images start loading only after it opens? Thanks in advance! Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work???? Code: <script type="text/javascript">
jQuery(document).ready(function(){
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<div class="hidden">
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
});
});
</script>
Hi I want to create an image gallery which has one main image (large size) with a series of smaller thumbnail images below. When you click on one of the smaller images below, I need it to load it into the space above. This series of images will be selected by a PHP script and a MySQL database. The ratios of the images will not always be the same, so the boundry box will need to change width and height accordingly. This will change the height of the page too I guess. Now, the real fly in the ointment is that I really would like the main image to have a drop shadow (gradient based) on all 4 sides of the image. So, good people of the JS Sub-Forum - whats the best way to get this done?! Cheers The Moose Does anyone know of a good webscript slideshow on a loop that I can use in a website ? www.chagfordshow.com We don’t want a database at the moment. Needs to work in all browsers. What I’m looking for :- Change the image every few seconds. Slip into any element of the webpage. All images will be the same size. Some landscape, some portrait. Looking for this to work all in client’s scripting. or maybe AJAX Thanks. Most grateful if anyone can help Hey all, Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above. Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible. Thanks all. Hello guys, I spent a lot of time searching for a good image/video gallery, but didn't find, what I'm looking for. All I need is a code, that I can insert to my webpage. I need a thumbnail gallery (images or videos), that I can scroll by next/previous buttons a open it by clicking in new window. This is how LightBox and VideoLightBox work, but they don't have the next/previous buttons. I found js ImageScroller, but it can't work together with VideoLightBox... Is there anybody solving this problem? Well I found this page http://codecanyon.net/item/jquery-ho...preview/112734 but I need it even for videos. If there is a solution for both images and videos... Thanks for help, DveD |
|||||||