JavaScript - Need Photo Gallery Where Client Can Add Captions

Does anyone know of a photo gallery where the CLIENT is able to update both the images and the captions? Please and thank you.

Or...... does anyone know of a gallery which pulls the photos and captions from a database? I can build a client interface to the database myself? Thanks again.

Hi all,

For this page he
http://morrish.juiceserver.co.uk/plo...=136&prop_id=9

I have the following code for the photo gallery:

Code:

	var thumbProportion = .17 // thumbnails are 32% of their full size;
	var IE = false; 
	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

	function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){		
		
		var thumbImg = nImg;
		var thumbImgAlt = thumbImg.alt;
		var origFullWidth = nFullSizeImg.width; 		
		var origFullHeight = nFullSizeImg.height;		
		var tempImgHolder = nFullSizeImg.src;
		var origFullAlt = nFullSizeImg.alt;
		nFullSizeImg.src = thumbImg.src;
		thumbImg.src = tempImgHolder;
		nSwapImgClass.style.width = nFullSizeImg.width + "px";
		thumbImg.style.width =  Math.round(origFullWidth * thumbProportion) + "px";	
		thumbImg.style.height =  Math.round(origFullHeight * thumbProportion) + "px";	
		thumbImg.alt = origFullAlt;
		thumbImg.title = origFullAlt;
		nFullSizeImg.alt = thumbImgAlt;
		nFullSizeImg.title = thumbImgAlt;
		nCaption.firstChild.data = thumbImgAlt;
	}

	function init(){
		
		var nImg = document.getElementById('fullSizeContainer');
		//if (!nImg) return
		var fullSizeImg = nImg.getElementsByTagName('img')[0];
		//if (!fullSizeImg) return
		nCaption = nImg.getElementsByTagName('div')[0];		
		
		IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
		for (i=0; i<nRule.length; i++)
			{
		 	 if (nRule[i].selectorText == ".swapImg")
				{	
				 var swapImgClass = nRule[i];
				 nRule[i].style.width = fullSizeImg.width + "px";				 
				}		
			}
			//var nGall = document.getElementById('photoGallery');
			//var nGallery = nGall.getElementsByTagName('a');
		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
			 	 swapImg(this.firstChild,swapImgClass,fullSizeImg);
                                 nCaption.innerHTML = this.firstChild.alt; 
			 	 return false;
				}			
		 	nGallery[i].href = "#";			
			}	
	}

IE ? attachEvent('onload', init) : addEventListener('load', init, false);

The pictures change fine, but I can't get the captions to change with them.

Any help anyone can give would be massively appreciated

I recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope).

What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want:

http://www.toddhido.com/

Hover over 'photographs >> homes at night >> houses' to get to one of the galleries.

Is this simple coding? If it's not too much trouble, a very basic step-by-step on how I might acheive this would be very much appreciated.

Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million.

http://www.annaleithauser.com/rosema...e/country.html

I am having a problem with making the images come back after they are hidden by the hide me css.

Html Code:

<div class="photo_container">
<div class="sorting">
<div>
<span>Filter photos by</span>
<a class="sortLink selected" data-keyword="all" href="#">All categories</a>
<a class="sortLink" data-keyword="creative" href="#">Creative</a>
<a class="sortLink" data-keyword="portrait" href="#">Portrait</a>
<a class="sortLink" data-keyword="event" href="#">Event</a>
<a class="sortLink" data-keyword="advertising" href="#">Advertising</a>
<a class="sortLink" data-keyword="nature" href="#">Nature</a>
<a class="sortLink" data-keyword="architecture" href="#">Architecture</a>
<a class="sortLink" data-keyword="model" href="#">Model</a>
<a class="sortLink" data-keyword="food" href="#">Food</a>
<div class="clear-fix"></div>
</div>
</div>
<div class="photos">
<div class="thumbnail_container">

<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>

</div>
</div>
<div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div>
<div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div>
</div>




Javascript Code:

var thumbnailSpacing = 15;

$(document).ready(function(){

$('.photo_container .sorting a.sortLink').on('click', function(e){
e.preventDefault();
$('.photo_container .sorting div a.sortLink').removeClass('selected');
$(this).addClass('selected');

var keyword = $(this).attr('data-keyword');
alert(keyword +' keywordset sort link');
sortThumbnails(keyword);
});

$('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px');
$('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe');

positionThumbnails();
});

function sortThumbnails (keyword){
//alert(keyword);

$('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){
var thumbnailKeywords = $(this).attr('data-keywords');
//alert(thumbnailKeywords +' keyword thumbs');
if(keyword == 'all'){
$(this).addClass('showMe').removeClass('hideMe');

}else{
if(thumbnailKeywords.indexOf(keyword) != -1){
//alert(thumbnailKeywords.indexOf(keyword) +' index keyword');
$(this).addClass('showMe').removeClass('hideMe');
}else{

$(this).addClass('hideMe').removeClass('showMe');
}
}
});

positionThumbnails();
};

function positionThumbnails(){

/* debug */ $('.debug-remainder').html('');

$('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){
$(this).css({
'display':none,
'top':'0px',
'left':'0px'
});
});

var containerWidth = $('.photo_container .photos').width();
var thumbnail_R = 0;
var thumbnail_C = 0;
var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing;
var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing;
var max_C = Math.floor(containerWidth / thumbnailWidth);

$('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){
var remainder = (index%max_C)/100;
var maxIndex = 0;
/* debug */ $('.photo_container .debug-remainder').append(remainder+' - ');

if(remainder == 0){
if(index != 0){
thumbnail_R += thumbnailHeight;
}
thumbnail_C = 0;
}else{
thumbnail_C += thumbnailWidth;
}

$(this).css('display','block').animate({
'opaciry':1,
'top':thumbnail_R+'px',
'left':thumbnail_C+'px'
}, 500);

var newWidth = max_C + thumbnailWidth;
var newHeight = thumbnail_R + thumbnailHeight;
$('.photo_container .photos .thumbnail_container').css({
'width': newWidth + 'px',
'height': newHeight + 'px'
});
});
}

Thank you ahead of time for any help given... my brain hurts!

Hi. 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.

I've got this little chunk of code running on my freelance portfolio site - on each page (different sections of my portfolio) I have 6 thumbnails and a full sized graphic with some descriptive info, you click the thumbnail and it switches the graphic and other info, that all works fine.

But on one page I have some web stuff and I'd like to make the var 'clientinfo' into a link to go to the client's website. I know I need to add an array with the website links, but then I'm not sure how to implement it into the html, I've tried various things I've found on here but I'm not getting anywhere on my own. I know it's something pretty simple (for someone who knows what they're doing) but I just can't seem to grasp it. Can anyone help?

the js is like this:
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var title = $(this).attr("title");
var description = $(this).attr("content");
var clientinfo = $(this).attr("clientinfo");

$('#gallery').hide();
$('#gallery').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
$('#title').html(title);
$('#description').html(description);
$('#client').html(clientinfo);
return false;
});

and then the HTML anchors are like this:

<a href="#" rel="images/gallery/web/site1.png" title="Site One" content="This is the descriptive info for site number one" clientinfo="Site One link" class="image"><img src="images/gallery/web/t_site1thumb.png" class="thumb" border="0"/></a>

Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated.

Here is the code I have:

Code:

<html>
<head>
    <style media="screen,projection" type="text/css">

/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

    </style>
    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]-->
    <script type="text/javascript">        document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
        var gal = {
            init: function () {
                if (!document.getElementById || !document.createElement || !document.appendChild) return false;
                if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
                var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
  li[0].className = 'active';
  for (i = 0; i < li.length; i++) {
    li[i].style.backgroundRepeat = 'no-repeat';
    li[i].title = li[i].getElementsByTagName('img')[0].alt;
    gal.addEvent(li[i], 'mouseover', function () {
       var im = document.getElementById('jgal').getElementsByTagName('li');
       for (j = 0; j < im.length; j++) {
          im[j].className = '';
                        }
                        this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
              });
           }
        },
      addEvent: function (obj, type, fn) {
             if (obj.addEventListener) {
                 obj.addEventListener(type, fn, false);
           }
            else if (obj.attachEvent) {
                obj["e" + type + fn] = fn;
                obj[type + fn] = function () { obj["e" + type + fn](window.event); }
                obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
        }
        gal.addEvent(window, 'load', function () {
            gal.init();
        });
    </script>
</head>
<body>
<ul id="gallery">
    <li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>

</ul>
</body>
</html>

Again, any help is greatly appreciated.

Thanks,

Ben.

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

I just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: www.equisearch.com. I like the features area on this website.

Here is my code so far:

Code:

<html>
<head>
<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514

var ImgPtr = -1;	// -1 for first pass only

var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [	// format: ['imageName','Comments about image']
  ['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'],
  ['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'],
  ['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>']		// Note: No comma after last entry
];
var intervalAction;

function ShowSlide(slide_num) {
  document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
  document.getElementById('mypic').alt = ImgArray[slide_num][1];
  document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}

function slideshow() {
  ImgPtr++;
  ImgPtr = ImgPtr % ImgArray.length;
//  document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
  ShowSlide(ImgPtr);
}
onload = function() {
  slideshow();
  intervalAction = setInterval("slideshow()",3000);
}
</script>
</head>

<body>
<div style="width:300;text-align:left;margin-left:auto;margin-right:auto">
  <div id="Caption" class="duh"></div>
  <img src="http://i200.photobucket.com/albums/aa216/Jilldear/pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
 <br />
</div>
</body>
</html>

Hello I'm trying to setup and image slideshow with captions. I can't it to work so far. Can someone help me. Here is a code snippet:

Javascript

var crossFadeDuration = 3

var Pic = new Array()

Pic[0] = '1.gif'
Pic[1] = '2.gif'


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}


Html

<body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()">

<img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" />

Hello coding world,

After hours of searching the net I found this awesome slideshow. Check it out:

http://tympanus.net/codrops/2011/01/...comment-409563

I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image.

Can anyone help me out? Please.

Thanks in advance.
Best regards,
Alan

Hello all,

Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails

At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed.

Here is the javascript:

Code:

var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});

Here is the HTML, which I have enclosed within a div box positioned absolutely on the page:

Code:

<ul id="gallery">
<li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li>
<li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li>
<li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li>
<li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

And here is the CSS:

Code:

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
#capt 

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->

I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received.

I am designing a custom wordpress blog for a client. He had asked for four sections to have a picture gallery fitting the format of the rest of the site with the simple functions of next and back. I found a gallery online ( http://www.web1marketing.com/photoviewer/ ) that had the elements I needed, customized the sizes. I made a working test version in the site that works great.

http://californiaisaplace.com/cali/test/

When I added the same code into the full site the URL address is changing but the photos are not ?

http://californiaisaplace.com/cali/c...os/#cannonball

Not knowing Javascript I am having trouble troubleshooting the issues. Can any one give me any advice on this?

Hi, I am somewhat new to javascript and website design, (as in I mostly try to follow tutorials to figure how stuff works) and was wondering how I would make a rotating photo slideshow (in js).

Such as in the following sites:
http://www.1stwebdesigner.com/wp-con...inal_small.jpg

and

http://www.1stwebdesigner.com/wp-con...inal_small.jpg (but instead of clicking on the photos to rotate, an arrow to rotate, such as in the first image/example)

Thanks so much in advance