fluid image gallery - Javascript

Cartoper

I am a seasoned application programmer that is playing around in the
world of web development. I found this web site that has nice fluid
image galleries and I am wondering how they are doing it:

http://pahountis.zenfolio.com/p925877948

I know they are putting each thumbnail in div and letting them just
flow. When the page is resized, the number of div changes. What I
don't understand what exactly are they doing to determine how many
images/div to display.

With a desktop application, I can determine the rectangle of the
thumbnail area and determine the rectangle of if thumbnail widget
(image N name) and determine how many total images I can display.
Logically it seems to me that if you where to have one div to fill the
space between the header and footer, I can use that size as the
rectangle of the thumbnail area, but it does seem I can do that type
of thing with a div.

Any and all suggestions and help is appreciated!

Cartoper

Sep 22 '07 #1

Subscribe Reply

1702

Cartoper

On Sep 22, 1:10 am, RobG <rg...@iinet.ne t.auwrote:

Cartoper wrote:

http://pahountis.zenfolio.com/p925877948

The page in question uses over 270kB of script files to do what it does
- and if scripting is disabled, you see no thumbnails at all. I expect
if you approach it from a CSS and HTML perspective, it would require
only a very simple script that monitors the size of a div element. When
its changes size, it should work out how many thumbnails to display (a
fairly simple mathematics problem).

I have no desire to right a quarter meg of JavaScript;) What I am
trying to figure out is how to implement this with CSS/HTML. Thanks
to your replay, after reading your reply to what I asked, I realized I
am not asking the right question;) Considering this is a JavaScript
forum and not a CSS forum, I am going to go post it there. But never
the less, here it is anyway:

Here is the basic HTML:

<body>
<div id="header">my header</div>
<div id="body">my body which is an image</div>
<div id="footer">my footer</div>
</body>

Via CSS2, how do I go about putting the footer at the bottom of the
page and most importantly making the body fill in between the header
and footer so that the text (or image) is centered vertically as well
as horizontally?

Cartoper

Sep 22 '07 #2

Similar topics

502

php-based image gallery without determined appearance

by: Perttu Pulkkinen | last post by:

Does anybody know a php-based image gallery, where final looks of the actual site would not be determined by the application? I mean that there would only be a php-library of objects/functions that could be used to incorporate folders and images to any kind of website with personal appearance. (Of course administration application should be ready made. I'm not talking about "send your favorite pics"-community, but image gallery as a part...

PHP

4823

python image thumbnail generator?

by: Chris Dewin | last post by:

Hi. I run a website for my band, and the other guys want an image gallery. I'm thinking it would be nice and easy, if we could just upload a jpg into a dir called "gallery/". When the client clicks the "gallery" link, a cgi script could search the gallery/ dir, and create thumbnails of any jpeg images that don't already have a thumbnail associated with them. The script could then generate a page of clickable thumbnails. A few questions:

Python

2250

Problems outputting to a 3 column table in order to crate an image gallery

by: ste | last post by:

Hi there, I'm trying to query a MySQL database (containing image data) and to output the results in a HTML table of 3 columns wide (and however many rows it takes) in order to create a basic thumbnail gallery. I can query and output the data as a single column table, but I'm having problems filling up a 3 column table (with different images, looping continuously until the end).

PHP

1798

Image Gallery Link Problem with IE 6

by: RE Kochanski | last post by:

I have attempted to use the CSS techniques from two or three sites to create a CSS only image gallery. I am muddling the affair by placing the thumbnails in one float, the page text in another float, then using absolute positioning (and z-index) to display the image over the second float. The CSS for the thumbnails is from "Web Accessibility At C-net.us" by K Chayka (http://accessat.c-net.us/test/gallery2.html). The CSS to display the...

HTML / CSS

2327

Hierarchical Image Gallery

by: gescom | last post by:

My goal is to create essentially two galleries on a single page, in which the first gallery determines what the second gallery displays. For instance, the first gallery refers to the contents of the main image folder. The second gallery would be a folder inside the main image folder. Depending on which image is displayed, the first gallery's image would trigger the second gallery's contents. I suppose this is sort of a hierarchal gallery...

Javascript

4204

[Flash8] Image MouseOver in XML Gallery

by: numbnutz | last post by:

Hi, I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and accompanying captions. The gallery has more than one image and the user can navigate the gallery by clicking forward and backward buttons to take then through the images: var galleryXML = new XML(); galleryXML.ignoreWhite = true;...

Flash / Actionscript

2122

Image gallery works great in IE but not Firefox

by: dabhand | last post by:

Hi This page http://www.dabhand.co.nz/ayupdev/gallery-riders.html works great in IE but not in Firefox... any help would be appreciated. It refers to an external javascript file which I have included the code to below: The file name is imgriders.js - as referred to in source of the html file above. if (document.images) { image1 = new Image; image2 = new Image; image3 = new Image;

Javascript

6784

DHTML moving an image

by: cjparis | last post by:

Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right. I have changed the script and now the image...

General

2513

Critique, image slicing for fluid CSS layout tutorial

by: Nik Coughlin | last post by:

I am halfway through writing a tutorial on image slicing for fluid CSS layouts, I would love some feedback on what I've done up until this point: http://nrkn.com/index.html I am still writing parts 3 & 4, "optimising the layout" and "alpha transparency". Also, does anyone know why I don't get numbers or bullets on my ul and ol in Internet Explorer (6 or 7)?

HTML / CSS

9706

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10335

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10323

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10082

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9157

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6854

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5525

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5652

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2993

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General