Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Can You Approve My Plan For Displaying Images?

    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...
    Last edited by Daniel_A_Varney; 07-06-2011 at 06:56 PM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.
    Last edited by Daniel_A_Varney; 07-06-2011 at 07:10 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    So, my next question is - what are CSS visibility display modes for, if there is no way of controlling them with HTML?

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    if you want to handle no js browsers (which kudos to you for doing ) 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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.
    Last edited by Daniel_A_Varney; 07-06-2011 at 07:16 PM.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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:

    Code:
    <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>
    Last edited by xFinaLx; 07-06-2011 at 07:19 PM.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    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
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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...

    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!
    Last edited by Daniel_A_Varney; 07-06-2011 at 07:26 PM.

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    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.
    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.


    Quote Originally Posted by Daniel_A_Varney View Post
    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...

    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.
    Last edited by xFinaLx; 07-06-2011 at 07:29 PM.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #13
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    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...

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

    Code:
    #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

    Code:
    <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.
    Teed

  • #15
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •