...

View Full Version : Can You Approve My Plan For Displaying Images?



Daniel_A_Varney
07-06-2011, 07:49 PM
First, I have downloaded a free template on which to base my site. It uses clean XHTML and CSS...

Secondly, to create an image gallery, I have come up with a plan, which does not involve any scripting. I have a rough idea of how to do this, as follows...

First, I have a designated a thumbnail area (thumbs either set out in a table or an inline row). Above this, I will have a division set up for displaying the image at a comfortable size. I have chosen not to use an iframe for this, instead working on the basis of page-per-image - and there will be media/ size information next to each image, inside the viewing div.

Now comes the tricky bit...
To make the image double or triple in size, I had the idea of creating a division whose display properties are set to 'hidden' and which uses position:absolute and z-index to bring it to the fore. When the viewer clicks on the image in the main page display div, this new, super-sized image container then becomes visible over the top of the page. Similarly, when the super-sized image is clicked on, the containing division will hide once more (display:hide).

Question:
Does that sound reasonable? And if so, could anyone offer guidance on how to code the links to make this happen? Please remember, I am avoiding javascript, so I'm looking for answers which use only XHTML & CSS.

It would also be nice to include a button somewhere on the image, thus providing the viewer with an instructional prompt to click on something to 'close' (actually hide) it again.

Many thanks in advance...

alykins
07-06-2011, 07:59 PM
to the best of my knowledge (without redirecting client to a new page or using a secondary postback language (asp php) ) there is no way to do this without js... there is no CSS handle for onclick... why are you avoiding js?

Daniel_A_Varney
07-06-2011, 08:06 PM
I'm avoiding JS for two reasons:

1) Accessibility for all browsers and platforms.

2) I have no idea how to use it.

Therefore, it is just safer for me to avoid JS altogether. I could do it all in Dreamweaver in minutes but that would just defeat the idea of the project. I would rather compromise by coding up a seperate page for each image than risk getting more headaches.

Daniel_A_Varney
07-06-2011, 08:08 PM
So, my next question is - what are CSS visibility display modes for, if there is no way of controlling them with HTML?

alykins
07-06-2011, 08:09 PM
if you want to handle no js browsers (which kudos to you for doing :D ) you will need another secondary language that works on postback. these are prob going to be "scarier" than js though... i would learn how the js works doing it and then dive into the deeper end of the pool :)

Daniel_A_Varney
07-06-2011, 08:14 PM
I appreciate the sentiment but it is not practical for me to learn new coding methods on top of what I already know. I spend most, if not all, of my time making things with metal, plastic, glass fibre and painting pictures. Once my website is up and running, all I want to do is add to it as I take more pictures. I'm not a web-publisher by trade. For me, it is a means to an end.

xFinaLx
07-06-2011, 08:15 PM
The only way to dynamically show/hide elements is with Javascript. Don't be afraid of it, its not that scary! This is an example of showing/hiding an image with JS and a link:



<script type="text/javascript">
function toggle(){
var ele = document.getElementById("hideImg"); //We set the variable ele as our image by using getElementById
if(ele.style.display == "block") { //We check if variable ele has a display:block style
ele.style.display = "none"; //If so, we change display to none to hide the image
}
else {
ele.style.display = "block"; //Otherwise, the display must already be none, so we change it back to block to show the image.
}
}
</script>
<style type="text/css">
#hideImg{
display:none; //The image starts out hidden. To make it visible on page load, this would be set to block.
}
</style>
<img src="path/image.jpg" id="hideImg" alt="Image" /> <!-- This is our image that we want to show/hide. Notice the id is hideImg, which is referenced in the script above. -->
<a href="#" onclick="toggle();"> <!-- We make a link to use to call the toggle(); function. The href is set to # so that a URL isn't called up. -->
Show/Hide
</a>

Daniel_A_Varney
07-06-2011, 08:20 PM
Please - as I have said, there are potential accessibility issues associated with JS in addition to the extra learning curve!

If this is not possible with good ol' fashioned HTML, then I will find another method.

But thank you for the definite answer. It has saved me time with fruitless experimentation. :D

alykins
07-06-2011, 08:21 PM
I appreciate the sentiment but it is not practical for me to learn new coding methods on top of what I already know. I spend most, if not all, of my time making things with metal, plastic, glass fibre and painting pictures. Once my website is up and running, all I want to do is add to it as I take more pictures. I'm not a web-publisher by trade. For me, it is a means to an end.

i completely understand. I would say then (if you care not to learn the other languages) you are stuck... again- to the best of my knowledge (and if there is I'd like to know it- aside from redirecting to a new page-) there is no way to handle an onclick event via CSS alone (again, news to me if there is)... you may be interested in using jquery (basically a library of js that you drop and use)... to do this via strict postback will require you to learn a secondary language... and doing it non postback (ie js) well... i already hit that lol :D
what about this though... you can make use of :hover... which is a CSS and will work. it might be more "up your alley" if you want to handle non js browsers and avoid js entirely o.O

teedoff
07-06-2011, 08:23 PM
Server side language with a database to manage your images would be the best way to go. This eliminates any js, so users who have it disabled will be able to view them as well, and it also makes managing your images, future image updates, and page updates a breeze.

If you dont wish to learn anymore web design, then maybe you should consider investing a few weeks in setting up a wordpress, joomla, drupal, or other CMS site. They are faily easy to setup, you can change the design when you get tired of the one you have, it comes with a database already setup, and there are tons of widgets and scripts that you simply click and install that would create nice looking image viewers/galleries.

Bottom line is, there's not much you can do with strict, static html/css beyond a basic page layout that wont require more headache in the future.

Daniel_A_Varney
07-06-2011, 08:24 PM
Oh, I suppose a hover might work. Though I can anticipate it causing some frustration to the user if they happen to move their mouse off it. Hold that thought... :D

You know, after fiddling about with hovers, it was this that made me wonder if there was a 'click' that I could use instead. Now, THAT would be cool!

Cheers!

xFinaLx
07-06-2011, 08:24 PM
Please - as I have said, there are potential accessibility issues associated with JS in addition to the extra learning curve!

If this is not possible with good ol' fashioned HTML, then I will find another method.

But thank you for the definite answer. It has saved me time with fruitless experimentation. :D

Oh well, I tried. Just for the record though, the only accessibility issues you'll run into with valid javascript will be in netscape 1.0. ;)



Oh, I suppose a hover might work. Though I can anticipate it causing some frustration to the user if they happen to move their mouse off it. Hold that thought... :D

You know, after fiddling about with hovers, it was this that made me wonder if there was a 'click' that I could use instead. Now, THAT would be cool!

Cheers!

Not with CSS. My other post shows exactly that with JS :) Haha.

Daniel_A_Varney
07-06-2011, 08:28 PM
Server side language with a database to manage your images would be the best way to go. This eliminates any js, so users who have it disabled will be able to view them as well, and it also makes managing your images, future image updates, and page updates a breeze.

Ha... nice one, Teed! Perhaps I'll look into this when I have had the site up and running for 6 months. It sounds like it could be eventually the right way to go...

teedoff
07-06-2011, 08:34 PM
Ok well then you can as you stated set up a "hidden" div with css properties of width and height set to 0.

Then set the psuedo class hover and define a width and height. Dont need a z-index as far as I know.


#links a img {
height: 0; width: 0; border-width: 0;
}

#links a:hover img {
position: absolute;
top: 950px;
left: 350px;
height: 200px;
width: 300px;
}

html


<div id="links">
<a href="myThumbnailImage.jpg"><img src="myLargerImage.jpg" /></a>

</div>

or something like that. I used this on a site once, but didnt test the above code specifically.

Daniel_A_Varney
07-07-2011, 12:33 AM
Thank you, Teed. I'll come back to this and study the code...

xFinalx - yes, of course you tried to help. I'm sorry if my answer appeared abrupt. The truth is, I always appreciate anyone taking the time to help. What you said about the truth of the 'accessbility issues' made me think again... It's possible I may use Javascript later on, once the site has been up and running some months.

tracknut
07-07-2011, 01:00 AM
Daniel, if you want a pure CSS photo gallery, you might take a look through the examples at http://www.cssplay.co.uk/menu/. They don't solve the issues described above, but Stu gives away his code, it could give you a nice start on your site.

If you're insistent on writing your own code, at least you could look at them as examples.

Dave

Daniel_A_Varney
07-07-2011, 06:11 AM
I've just started putting my content into the template and already I've messed it up! The whole design has broken. :mad:

Okay, I think I need to find a design which avoids floats now. This whole floating, box-model thing is totally illogical to me.

teedoff
07-07-2011, 02:50 PM
I've just started putting my content into the template and already I've messed it up! The whole design has broken. :mad:

Okay, I think I need to find a design which avoids floats now. This whole floating, box-model thing is totally illogical to me.

No thats the complete opposite of what you want to do...lol.

Floats ARE the way to go. Before floats, elements had to be positioned on the page using relative, absolute, static and so on. FLoats are so much easier once you learn the document flow and the behaviors of floated and non floated elements.

The box model is tricky at first, but once you have that Ah HA moment and "get" it, things will become much easier. Really, simply put, the box model says that you can't put something larger in size than the container its put in. Margins and paddings all count in determining the size of the box.

Is your new template site up live? If so post the link and I'm sure someone can help sort it out.

vikram1vicky
07-07-2011, 03:15 PM
I've just started putting my content into the template and already I've messed it up! The whole design has broken. :mad:

Okay, I think I need to find a design which avoids floats now. This whole floating, box-model thing is totally illogical to me.
Daniel,

Don't give up... it's very easy.. just go through this (http://css-tricks.com/2841-the-css-box-model/) link. Hope after reading this, box model will be easier for you :thumbsup:


Cheers :)

Daniel_A_Varney
07-07-2011, 04:52 PM
Thanks guys - and sorry for the childish outburst. I do a lot of physically demanding and hand-eye co-ordination work and sometimes there are challenges. We deal with them.... but CSS is the one thing that sometimes pushes me over the edge! :D

Okay - I think there is a simpler answer than trying to screw around with this design. I'm going to try a different template...

If you read what Viklund has included in the example text of this template, it's clear he understands and caters well for the beginner. I think he deserves a medal. One often pays good money for these things!

I know enough CSS to be able to change colours, format and resize some of the elements.

I'm weighing these two against each other...

http://andreasviklund.com/files/demo/basic-minimal/
and
http://andreasviklund.com/wp-content/uploads/2011/03/basic-minimal-alt.png

I'm concerned in case the second one might be too wide (navigation too far over) on smaller screens.

I think I'm not done yet finding a template. Need to slow down and look at them all...

teedoff
07-07-2011, 05:28 PM
Thanks guys - and sorry for the childish outburst. I do a lot of physically demanding and hand-eye co-ordination work and sometimes there are challenges. We deal with them.... but CSS is the one thing that sometimes pushes me over the edge! :D

Okay - I think there is a simpler answer than trying to screw around with this design. I'm going to try a different template...

Do you use firefox browser? and if so have you installed firebug? Its VERY useful in webdesign. Most browsers have a developer tool of some sorts, but to me firebug is a little better in regards to its UI. A little tricky at first to learn, but not that bad. Once you know how to inspect code and inspect certain elements on your page, its a breeze. It can show you the box model dimensions of any element you select.

Daniel_A_Varney
07-07-2011, 06:37 PM
Yes I've tried Firebug and it was useful up to a point - but that's skirting the issue...
Here's the problem... the MAIN PROBLEM...

If all I had to do was code for Firefox, I could do it. I probably wouldn't even BE here. I've written some nice little pages in my time... But NOTHING seems to work in both Firefox AND IE properly. IE is my single greatest enemy. I can get my head around most of what web-design entails but after having read about what it takes to do hacks etc... No. It seems IE is out to get me. And it happens every time.

I built my first website back in 2003. http://www.tengunade.pwp.blueyonder.co.uk/. It uses tables and all the so-called, 'bad practices' mentioned by all the modern web designers and yet.... it works in all browsers I've tried it on!!!

Now this pisses me off, because I've tried (GOD, I've TRIED) to be a 'good person' and to be 'web-standards compliant'... and for the last eight years of my life, IE has been giving me hell!

So every 12 months for the last eight years, I've tried to make a web-standards page using CSS positioning. I must have a thousand folders full of half-finished projects which I abandoned because I couldn't work out how to make them work in both browsers. Some of them beautiful - but a waste of valuable creative hours in my precious life!

I know this probably sounds somewhat over-dramatic to the casual reader - but honestly - this kind of thing drains my creativity and leaves me feeling unaccomplished.

This 'web standards' thing... It's... it's like some kind of bloody religion, like Born Again Christianity, infecting the internet. The analogy here, is that to be a good person and make it into heaven (or the first page of Google), one has to throw off all worldly pleasure and endure suffering. Does this sound familiar...?

But if all the 'tenets' of this religion were true - my webpage would not come up in Google (and it does) and I would have been sued by blind and disabled users eight times over by now... (perhaps my pages are SO inaccessible to them, that they can't find my address to give to their solicitor?). What's more likely is, no one actually cares...

I'm really sorry to say this (and I DO WANT to make web-standards compliant pages) but for some reason, I'm just not feeling the love of 'Jesus W3C Christ'.

For instance...
This is the first time I've actually given in and used someone else's template.
Finally found a template that works for me, design wise. I can change the colours and add my own graphics and it seems to cover formatting for the kind of information I want to put out...

here is it is...
http://andreasviklund.com/files/demo/variant-portal/
Lovely, isn't it? Now guess what... go look at this in IE!

Now read the example text in the template. He's telling us this works in all major browsers, plus mobile devices. After one look in IE, how can I be sure anything he says, from now on, is true?

Like I said - if all I wanted to code for, was Firefox, I wouldn't have an issue...

And I don't think I'm the only one tearing my hair out, either. I can smell the frustration in nearly all the posts made in the HTML/ CSS forum.

alykins
07-07-2011, 07:42 PM
sigh... what to say... i understand your frustration. What IE are you running? I looked at the page in IE and it looks the same for me... im using IE9 and i even put into compat mode to view as "older" browser... i think that you should make your page... dont fuss over the little things, then come back for tweaking the little things that are frustrating you... make sense? over complicating the issue is obviously frustrating you to no end- make life easier... dont try to make everything perfect in one shot

Daniel_A_Varney
07-07-2011, 09:38 PM
Thanks. I'm using IE 6.0 here. My concern is that anyone viewing my site might be using it. I'd like some solid backwards compatibility here.

For me, it isn't such a little thing. It looks terrible.

Edit:

I've just combed through and found this:


ul#navitab li a{float:left;background:url(images/corner.gif) no-repeat top right #eee;border-left:1px solid #ccc;border-right:2px solid #fff;color:#555;display:block;height:1.2em;padding:5px 16px 7px;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap;}

If I am not mistaken, the author had forgotten to include float:left; in the #navitab li a rules.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum