JavaScript - Adding An Array With Links To A Photo Gallery

Hi! I've been working on a javascript photo gallery on my talent agency's website. I'm running into a bit of trouble with two things...

First off, i would like it that when the mouse is removed from the thumbnail, that the image the mouse was last on would remain on screen but the thumbnail wouldnt change back.

Also, i cant figure out how to make it that when an image is being displayed, the photographer and makeup artist information could also be seen under the picture.

Any help in this would be GREATLY appreciated!


A sample of one of the pages this is being used on is the following: http://www.cyanidenation.com/dakygallery.html

The code I'm using is the following:

Code:

<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Thanks for the help!

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

Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php

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.

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

Hello,

I have a bit of javascript that is supposed to change picture and its accompanying text when you hover over a bit of link text in another area of the page. This is working, however, the text is toggling without the picture due to an invisible area next to each link. I am not sure if it's an issue with applying my javascript to another bit of code or what.

Here is the code that I have that flips the text:
Code:

<script type="text/javascript">
function tabOver(which)
{
    for ( var d = 1; d <= 31; ++d )
    {
        document.getElementById("TAB"+d).style.display 
           = ( d == which ) ? "block" : "none";
    }
}
</script>

and here is the bit that flips the pics:
Code:

<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("photos/aes1.jpg","photos/aes2.jpg","photos/aes3.jpg","photos/aes4.jpg","photos/aes5.jpg")
</script>

And here is the html where they show up:
Code:

<div id="mainimg-staff"><a href="javascript:warp()"><img src="img/select-aes.gif" name="targetimage" border=0></a>

<div id="TABHOLDER">
	
    <div id="TAB1" class="tabbed" style="display: block;">
       &nbsp;
    </div>


   <div id="TAB2" class="tabbed">
       <h1>Cheryl Lyon</h1>
<ul>
	<li> Basic facials and skin treatments
	<li> Waxing
	<li> Specializing in naturopathic facial treatments
</ul>
    </div>


<div id="TAB3" class="tabbed">
       <h1>Jackie T.</h1>
<ul>
	<li> 10+ years experience
	<li> Facials and skin treatments
	<li> Waxing
	<li> Specializing in <em>Extreme</em> eyelash extensions
</ul>
    </div>

(there are a lot more text bits but I only included 2 to keep this short)

Finally, here is the link that is making all this wonderful stuff happen:
Code:

<div style="left: 100px;" onmouseover="tabOver(2);"><a href="staff-aes.shtml" onMouseover="changeimage(myimages[0],this.href)">Cheryl Lyon</a></div>

Do you see how I combined the pic and text in one code? I promise you that it is on accident that this is working at all.

Could this be a style issue and not a javascript issue? I can't find anything in my css that will fix this.

Hello there everyone!

I am currently rebuilding my portfolio and utilizing lightwindow as a means to display my projects. I have set up the site so that there is a grid of thumbnail images and also a textual list of links (basically another means for the user to navigate the projects if they prefer not to use the thumbnail links).

For some projects I need to use the gallery function to display multiple images. I have this functioning when you click on the thumbnail link just fine. The problem is having the corresponding text link utilize the same set of images without creating a duplicate set. Is there a way to call the gallery without putting links to each image utilizing "class" and "rel".

Here is a brief section of the html to show you what I mean...I have minimized it to show you clearly what I am trying to do...

Code:

<!-- Text List of Links to Projects -->
<div id="subNav" style="display:none;">
        <ul>
        	<li class="listHeader">Web &amp; Interactive</li>
        	<li>
        		<a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a>
        	</li>
        </ul>        		
</div>
        
<!-- Thumbnail Image Links to Projects -->        
<div id="portfolioContent">
        <div id="thumbnail">

        	<!-- Set of Images to be used in gallery-->  
        	<a href="imgs/gallery/projectName/proj2A.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web &amp; Interactive[Dynamic Info Design]">
        		<img src="imgs/thumbnails/project1.jpg" alt="Project Name" />
        	</a>

        	<a href="imgs/gallery/projectName/proj2B.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web &amp; Interactive[Dynamic Info Design]"></a>

        	<a href="imgs/gallery/projectName/proj2C.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web &amp; Interactive[Dynamic Info Design]"></a>

        </div>
 </div>

I want to call that same set of 3 images with the text link <a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a>

Right now it's just showing the one image...if I use the rel tag in that link, it adds the image as a duplicate and then says there are 4 images in the set instead of 3.

Does this make sense to anyone. How can I pull this same gallery up without duplicating the images or having the same project show up twice when you click on the gallery tab.

View actual site in progress at:
http://www.reneeclements.com/newWebs...sign/index.php

Any insight would be greatly appreciated! Thanks!
Reply With Quote

Hello everyone,

I was wanting to know how you add links to Adobe Lightroom gallery photos?

Here is the xml gallery code I am trying to add links to:





<?xml version="1.0" encoding="UTF-8"?>

<simpleviewerGallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="1" stagePadding="40" thumbnailColumns="2"

thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="images/" thumbPath="thumb/">
<image>
<filename>1.jpg</filename>
<caption></caption>
</image>
<image>
<filename>2.jpg</filename>
<caption></caption>
</image>
<image>
<filename>3.jpg</filename>
<caption></caption>
</image>
<image>
<filename>4.jpg</filename>
<caption></caption>
</image>
<image>
<filename>5.jpg</filename>
<caption></caption>
</image>
<image>
<filename>6.jpg</filename>
<caption></caption>
</image>
<image>
<filename>7.jpg</filename>
<caption></caption>
</image>
<image>
<filename>8.jpg</filename>
<caption></caption>
</image>
<image>
<filename>9.jpg</filename>
<caption></caption>
</image>
</simpleviewerGallery>






I have Adobe Lightroom 3. So far browsing through various tutorials and help notes I have not found a way to do this.

However, I am hoping there is in fact a way to do this.

Here is the actual flash simpleviewer gallery uploaded I have uploaded for a visual example.


http://www.iandmyself.me


I would simply like to add links to the photos once they are clicked.

On my website, I have random logos appear on the home page as products that I recommend. I would like to make these logos into links to the website they are from, so that when one clicks on the picture, it directs you to the site, but I can't quite get it to work, and I know very little about Javascript (as you may know from my previous question about Javascript). If someone could help me crack the code, that would be great

Here's my current JS code:

Code:

<!--

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'http://i200.photobucket.com/albums/aa216/Jilldear/classicequinelogo-1.jpg'
theImages[1] = 'images/logo2.jpg'
theImages[2] = 'http://i200.photobucket.com/albums/aa216/Jilldear/pyranha-1.jpg'

// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

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

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->

And my current HTML code:

Code:

<script language="JavaScript">
<!--
showImage();
//-->
</script>

Sorry for being so green with JS

Okay so im just doing a little test and this might seem like a really stupid question but i cant figure it out...all i simply want to do is take all those numbers and get the sum then display the sum in a document.write

in theory i should get 10 but i dont and idk why i have tried many many things

Code:

var numbers = new Array();
numbers[0] = 1;
numbers[1] = 2;
numbers[2] = 3;
numbers[3] = 4;

thanks

I want to make a script that will insert all text type inputs into an array. From there I want to be able to call them and edit them. Here is what I have so far and it is not working.

var phone1 = '702'
var inputArray = new Array();
var inputs = document.getElementsByTagName('input');
inputs;
if (input.type == 'text') { inputArray.push(inputs.id); }
inputArray.reverse();

inputArray[0].value = phone1;

I know you can add data to array wiht the push() method but can you add a whole new line as in

a = new Array
a [1] [1,2,3]

so it would create a new line
a [2] [4,5,6];

The syntax to the array i think is wrong but you get the question.

Resolution:
Code:

   <script type="text/javascript">
        function amountTotal() {
            var totalDonations = 0;
            for (var i = 0; i < amount.length; i++) {
                totalDonations += amount[i];
            }
            document.write(totalDonations);
        }
   
    </script>

I have an array in a seperate.js file that I need to step through a FOR loop to grab all these values and add them together. Here is a small sample of the array's:

Code:

city = new Array();
state= new Array();
zip = new Array();
amount = new Array();
date = new Array()


firstName[0]="Nina";
lastName[0]="Largent";
street[0]="88 Regal Lane";
city[0]="Williamsburg";
state[0]="KY";
zip[0]="40769";
amount[0]=125;
date[0]="2011-09-18";


firstName[1]="Mike";
lastName[1]="Hart";
street[1]="Da404 Barrow Street";
city[1]="London";
state[1]="KY";
zip[1]="40744";
amount[1]=75;
date[1]="2011-09-18";

Here is the loop step through that I have:
Code:

    <script src="arrays.js" type="text/javascript"></script>
   <script type ="text/javascript">
   function amountTotal()
   var totalDonations = 0
   for (var i=0; i < amount.length; i++) {

   }
   
   </script>

I am stuck on how to grab each amount index and add them together to save them as the amountTotal variable.