JavaScript - Galleria Photo Gallery - Multiple On One Page?

Hello,

Do you know any HTML/Javascript/JQuery photo gallery which behave like this flash gallery?

http://www.erwinolaf.com/#/portfolio..._2001/gallery/

The point is images :

1- Images does not show in a modal popup window.
2- When each thumbnail selected , current image animate to left and selected image also shown with comming from right to left.

Thanks


Mazdak

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

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

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

Hi there,

I'm hoping someone can help me... I am using Galleria (http://galleria.aino.se/) for a friend's website but I just can't get it to work... I haven't used JavaScript or JQuery much and it's driving me mad!!

I've followed all the instructions on the site, and lots of examples I have found all over the web... This one was most successful - http://monc.se/kitchen/stew/galleria/ the furthest I have been able to get is thumbnails showing, but when you click on them you can't see the gallery - see he

http://lisacritcher.skillsontoast.co.uk/?page_id=28

I know the formatting is all off but I'm not worried about that for now... I just want to get the gallery working!! Can anyone help?

Thanks in advance

Hello,

Im not sure if anyone here will be able to help me but I thought it would be worth a shot.

I am trying to use galleria for a project of mine. The gallery works fine - it brings the images in (from flickr) but only in the order that they have been added. I would like them to bring the images in using the sets I have used within flickr.

I have managed to load one set using getSet but I would like it to load all sets in set order. (hope that makes sense).

If anyone has experience with this or can point me in the right direction it would be much appreciated.

Thanks in advance for any help/advice.
Regards
Mark Booth

I'm using the classic theme for galleria to create a basic image gallery. http://galleria.io/themes/classic/

The gallery is for a photo retoucher who has some before/after photos that I want to switch in and out with a mouseover. Basically when the user hovers over the main image an unedited version of the image will show, when they mouse out the image will revert back to the original.

I'm not sure how to achieve this with galleria. I thought I could target the img tags but that doesn't seem to be working.

I'm relevantly inexperienced with javascript so I'm not sure how to target the imgs through galleria or if this can be accomplished in an effective way. (maybe changing the src?)

I'm not sure if there is anyone familiar enough with galleria to help me out, but i figured asking can't hurt. Any sort assistance would be greatly appreciated.

Okay, 3 questions I'm afraid, all in reference to the JQuery Galleria on this page: http://digital.tmhcentral.com/pratt/a...

Apologies for my explanations as I am a newby to anything beyond html & css.

1. I have a number of images placed in my html page simply using the img tag. When the page is loading I see these images stacked (full size) for a few seconds before galleria loads and then begins to convert them into thumbnails. Any idea how to hide the images on the page but only to appear in the galleria as the images start to load as thumbnails?

2. I wish to have the same 5px (horizontal) gap between each thumbnail. However my images are of different sizes and have been optimized to a max width or max height. I do not wish for the thumbnails to be cropped so have set: thumb_crop: false, This has now visually created an inconsistent horizontal space between each thumbnail (highlighted in pink to show the gap left and right of each one). I have already attempted to change the thumbnail width to auto in the css, but with no success. How do I remove the 'excess' left & right space from each thumbnail so that the gap appears consistent?

3. Lastly, upon page load, is it possible to hide the main stage image until a thumbnail is selected? I wish to initially display some text (where the main image sits) which is then replaced with the main image when the user clicks on one of the thumbnails.

I would appreciate help on any of the above.

Thanks in advance, Paul

So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction.

I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons.

I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value.

Code:

<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 
     "This is a place holder for the third set of text.",
     "This is a place holder for the fourth set of text.",
  "This is a place holder for the fifth set of text.",
 "This is a place holder for the sixth set of text.",
 "This is a place holder for the first seventh of text.",
];


var currentMain = 0;
var currentMainT = 0;

function Prev() 
{
    return ShowMain(currentMain-1);
				return ShowMainT(currentMainT-1);
}
function Next() 
{
    return ShowMain(currentMain+1);
			 return ShowMainT(currentMainT+1);
}


function ShowMain(which)
{
    currentMain = which;
				currentMainT = which;
    if ( currentMain < 0 ) currentMain = 0;
				if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; 
    					document.getElementById('mainImg').src = imgList[currentMain];
					    document.getElementById('mainText').innerHTML = clientData[currentMainT];
   						 var PD = document.getElementById('Pg');
										var PD2 = document.getElementById('Pg2');
   		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
				  if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
						document.getElementById("mainText").style.display = 'inline'
						document.getElementById("gallery").style.color="#ff0000";
						
    return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">



function preloader() 

{


     // counter
     var i = 0;


     // create object
     imageObj = new Image();


     // set image list
     images = new Array();
     images[0]="../Assets/Images/pt_entry+hall2.jpg"
     images[1]="../Assets/Images/pt_stair+hall.jpg"
     images[2]="../Assets/Images_Revised/40_kitchen.jpg"
     images[3]="../Assets/Images_Revised/40_stair.jpg"
				 images[4]="../Assets/Images_Revised/C_front2.jpg"
				 images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
     images[7]="../Assets/Images_Revised/C_side.jpg"
     images[8]="../Assets/Images_Revised/Y_combo.jpg"
     images[9]="../Assets/Images_Revised/Y_window.jpg"
				 images[10]="../Assets/Images_Revised/V_stair.jpgg"


     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }



} 



</script>

Code:

<div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
      </td>
    <td id="cell5 images">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>

I'm using this tooltip on my site: http://craigsworks.com/projects/simpletip/, I want to display some information about the user when someone hovers mouse on his/her username. This is the code I use to call simpletip:

Code:

$(document).ready(function(){
// Create your tooltips 
var api = $(".ttip a").simpletip().simpletip();

api.load('user.php'); 
});

The problem is that I want to determine the user id in order to retrieve according information from database. As I see from this code the address that should be call onmouseover is determined in advance. Is there a way to send some parameters (user id in this case) in user.php file according to which link is hovered?

Hope I'm clear.