Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Forward/backward overlay arrow

Reply
Thread Tools

Re: Forward/backward overlay arrow

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-10-2012
dorayme wrote:
> In article<jh34to$fkt$(E-Mail Removed)>,
> "Jonathan N. Little"<(E-Mail Removed)> wrote:
>
>> You cannot use
>> *history* to go to the "future": a page that the user has not visited yet.

>
> O yeah? No wonder the world is doomed, you earthlings never learn.
>


Well it all went to hell because of Doc Brown.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-11-2012
Alfred Molon wrote:
> In article<jgu1e8$1gv$(E-Mail Removed)>, Jonathan N. Little says...
>
>> If only it were true...I'd like to throw IE7& 8 on the funeral pyre as
>> well, but in reality some large businesses drank the MS Kool-aid and
>> locked their infrastructure on the IE-only crap for their intranets.

>
> Just ran into some issues with IE
>
> I tried to do something new and it works in Firefox (latest version),
> Opera (latest version) but not in IE (I have version 9).
>
> I put a transparent png on the image, so that if you click anywhere on
> the image except on the left/right buttons you go one level higher:
> http://www.molon.de/galleries/Egypt/.../img.php?pic=2
>
> The idea was to get rid of the top button and make the entire image
> surface clickable.
>
> Does not work in IE... why?


Not sure, but you do have the situation where links are absolutely
positioned and OVERLAPPING. Maybe since IE only supports event bubbling
and Firefox supports and fires both capture AND bubble unless otherwise
specified may explain the difference. But I would say if you have the
top button why make the whole image to the same? It is not intuive. I
would expect the arrow icons to the the "controls". Click the image I
would expect would "open the image to say a larger version..."

>
>
> The plan is also to get rid of the "Select" and "Lightbox" links on the
> gallery page:
> http://www.molon.de/galleries/Egypt/Siwa/Amun/
>
> by making these links appear on the thumbnail when hovering on it. It is
> doable with the code you suggested, but I want to have the thumbnails
> clickable, so that clicking on the thumbnails everywhere except on the
> "Select" and "Lightbox" links leads you to the image page.
>
> Something like this:
>
> <div class="image">
> <img src="thumb.jpg" alt="">
> <a href="page with large image> class="impage" title="pic name">
> <img src="1.png" alt=""></a>
> <a href="select link" class="sel" title="Select image">Select</a>
> <a href="lightbox link" class="light" title="Lightbox">Lightbox</a>
> </div>
>
> BTW, I assume that the search engines wouldn't have any problem
> following the three links above, would they?


A link is a link. The only trouble would be how it was created. If you
use JavaScript then yes it would have an impact on search engines.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      02-11-2012
On Mon, 06 Feb 2012 20:49:30 -0500
"Jonathan N. Little" <(E-Mail Removed)> wrote:

[snip]

> Did a little more tweaking that enhances it a bit, for the browsers that
> support CSS3
>
> <http://www.littleworksstudio.com/temp/usenet/slideshow>


CSS3 manual slide show:

http://<br /> https://docs.google.co...MWM3NzU0<br />

Not intended for old tired browsers. HTML content generated with the aid ofPHP
from a directory of images.



--
BootNic Fri Feb 10, 2012 08:54 pm
Genius is eternal patience.
*Michelangelo*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAk81ymkACgkQOcdbyBqMFBEDHgCaA4M0k5UQO4 75MhLg5TQwFcAB
i/kAoJv381/ejO2VXAwKtgWLJwc/SAHk
=pq/n
-----END PGP SIGNATURE-----

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-11-2012
Alfred Molon wrote:
> Ok, you are probably right.
>
> In the case of the thumbnail table
> http://www.molon.de/galleries/Egypt/Siwa/Amun/
>
> clicking on the thumbnail should bring you to the page with the large
> image.
> Here the whole thumbnail area should be clickable, except on the lower
> part with the Select and Lightbox links where clicking leads you to
> somewhere else. How do I implement this?
>
> The idea is to eliminate the page area dedicated to the Select and
> Lightbox links, thereby having more page area showing relevant content.
> I would like to do this without Java, if possible.


First of all a nitpick here, Java != JavaScript/

<http://en.wikipedia.org/wiki/Java_%28programming_language%29>
<http://en.wikipedia.org/wiki/JavaScript>

It is JavaScript that you mean to say.

Basically I would do it just like the page you did before, but repeat
for each thumbnail:

<http://www.littleworksstudio.com/temp/usenet/lightboxdemo>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2012
Alfred Molon wrote:
> In article<jh6evp$pb0$(E-Mail Removed)>, Jonathan N. Little says...
>
>> It is JavaScript that you mean to say.

>
> Yes, apologies for using the wrong name
>
>> Basically I would do it just like the page you did before, but repeat
>> for each thumbnail:
>>
>> <http://www.littleworksstudio.com/temp/usenet/lightboxdemo>

>
> Thanks for your effort, but what I'm trying to do is to optimise the
> screen space, by squeezing as many thumbnails as possible into one page.
>
> The idea is to eliminate the "Lightbox Select" rows, e.g.
> http://www.molon.de/galleries/Egypt/Siwa/Village/
>
> by making these links appear/disappear automatically when you hover on
> the thumbnails.
>
> In the test page you created there is a lot of space between the
> thumbnails, while I'd like to optimise the usage of the screen area.
>
> In trying to transfer the code of the image pages to the thumbnail pages
> I'm running into the problem that the div.image css has a fixed size:
>
> div.image {
> width:<image width> px;
> text-align: center;
> position: relative;
> margin-left: auto;
> margin-right: auto;
> }
>
> while my thumbnails have variable sizes.
>
> One option would be to create such a div.image css one for each
> thumbnail ( div.image01 ... div.image02... etc), or is there a way to
> take the width parameter out of div.image and put it into the style css
> of each thumbnail?


No with CSS. You could have the thumb dims in the database, or get the
dims with your PHP getimagesize() and then generate the CSS on the fly.
Not only is that a bit fussy, having DIV of differing sizes stack oddly
when floated...Better to set a minimum size and stick with it.

> This is how far I got this evening (1am here right now):
> http://www.molon.de/test2/gal.html
>
> The left thumbnail does what I want, but the formatting and positioning
> of the Lightbox Select links is still a mess.


I snugged up the dimensions a bit
<http://www.littleworksstudio.com/temp/usenet/lightboxdemo>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2012
Alfred Molon wrote:
> In article<jh75vp$no1$(E-Mail Removed)>, Jonathan N. Little says...
>> No with CSS. You could have the thumb dims in the database, or get the
>> dims with your PHP getimagesize() and then generate the CSS on the fly.
>> Not only is that a bit fussy, having DIV of differing sizes stack oddly
>> when floated...Better to set a minimum size and stick with it.

>
> Ok, I managed to do it - with CSS. Here is an example:
> http://www.molon.de/galleries/Oman/Wahiba/Pattern/
>
> The Select and Lightbox links now appear on hover, the thumbnails are
> still clickable and lead to the image pages, and the whole thumbnail
> table and overall image presentation is now more neat.


Sure does. The only criticism I would say is by using a table with a
fixed width that 1) you have to pre-layout each grouping to fit, And 2)
if a visitor has a wide screen monitor where that could easily stretch
to window to see ALL the thumbs at once they cannot with your fixed
layout. I prefer a more flexible approach.

>
> I'm now starting to wonder if it would be possible to have more things
> happening when hovering on the thumbnails:
> - enlarged thumbnails appears
> - infobox with details about the image appears


I don't see why not.

>
> By the way, IE8 does not support the opacity parameter, only IE9 does.


And IE7 does not support <div style="display: table-cell;
vertical-align: bottom;" But hey, it degrades okay and that is what they
deserve for using MSIE!


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2012
Alfred Molon wrote:
> In article<jh8ui5$6b5$(E-Mail Removed)>, Jonathan N. Little says...
>> Sure does. The only criticism I would say is by using a table with a
>> fixed width that 1) you have to pre-layout each grouping to fit, And 2)
>> if a visitor has a wide screen monitor where that could easily stretch
>> to window to see ALL the thumbs at once they cannot with your fixed
>> layout. I prefer a more flexible approach.

>
> The problem is that each thumbnail has some text and there are big
> differences in thumbnail width, see for example:
> http://www.molon.de/galleries/Egypt/Siwa/Desert/


Since they are thumbnails where you are only giving a hint of "what is
to come" if you click the enlarge button you could either pick a max
width and max height and scale thumb not to exceed the constraints or
chop to just show a portion. I have seem both methods employed.

>
> With this combination floating thumbnails are a bit messy. Either you
> have to take out the text below the thumbnail, or you do it the with
> your implementation, but then end up with lots of unused screen space.
>


You ought to see the wasted space on my monitor if I maximize the browser.

+----------------------+
| +-------+ |
| |#######| |
| |#######| |
| |#######| |
+----------------------+

> With the current state of the technology, HTML+CSS can't solve the
> problem.
>
> Perhaps it would be possible to do an optimal float with Javascript: by
> writing a Java application which executes on the client and builds up a
> thumbnails table matching the window width. This would not work however
> with disabled Javascript.


Actually if you just made sure that the "cells" all had the same width
then the stacking would not be so bad. You can use PHP's getimagesize()
to get each thumbnails width and add the width style adjustment on each
DIV as to build the page. Yes it would take some effort if you feel each
row MUST be centered, but hey you're photographer I gather, you don't
always have to put your subject center-frame right?

>
> Another option would be to offer the thumbnail table width as a
> parameter, allowing people for instance to enter a pixel width (600,
> 800, 1000, 2000 etc.).
>
> On the other hand, is there a PHP function with which to read the window
> width in the browser of the client?


Not client-side. That's JavaScripts domain. PHP only knows the server


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2012
Alfred Molon wrote:
> In article<jh96e6$n9h$(E-Mail Removed)>, Jonathan N. Little says...
>> Not client-side. That's JavaScripts domain. PHP only knows the server

>
> I just tried inserting the following into my PHP script (on my local
> test server):
>
> if (!(isset($_GET['brwi']))) {
> echo "<script language='javascript'>\n";
> echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER
> ['QUERY_STRING']}"
> . "&brwi=\" + window.innerWidth\n";
> echo "</script>\n";
> exit();
> }
>
> and then with the following PHP code:
>
> $maxwidth = $_GET['brwi'] - 100;
>
> I read the browser width and set the table size.
>
> Then with
>
> $thumbtable = make_thumbtable ($pics, $maxwidth);
>
> I generate the thumbnail table.
>
> Works like a *MIRACLE*: when I resize the browser window and call the
> page it automatically generates a table in the right size.
>
> BUT: fails miserably if Javascript is disabled - you get a white screen.
> That's because with disabled Javascript the browser does not call again
> the server and everything dies there.
>
> What can I do?


I think you are tilting at windmills. When I find myself in a similar
impossible situation, I decide to rethink my objective and approach.

Here I get the thumb width with PHP getimagesize function

//only need 1st value in returned array which is the width
list($thumb_width) = getimagesize($thumb);

Then I set the width style property of the in the lightbox DIV when
generating the output:

<div class="lightbox" style="width: <?=$thumb_width?>px;">

In action:

<http://www.littleworksstudio.com/temp/usenet/lightboxdemo2>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-13-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> the image pages, for instance:
> http://www.molon.de/galleries/Egypt/.../img.php?pic=2
>
> The image is fixed width. How to make this scale with the window size?


Wonder what your idea of scaling to window size is exactly? If it
scaled to window size where would the rest of the page go? If it
scaled to the rest of the page (top and bottom headings and
navigation), it would be scaling to a certain box that included
everything but not the viewport. Everything to scale to window size is
not a definite concept and can mean different things. To spread
everything out to fit the largest viewport would actually be a
caricature of the idea of fluid design, it would result in ugliness
(tempting some developers to go to the other extreme of elegant fixed
width jobs).

btw, why do you want the big overlaying arrows, they look ugly and
distracting when visible? What is actually wrong with simple normal
nice arrows underneath the picture that are there permanently just as
so many other things are there permanently on every page without
distracting from the picture. These popup arrows are cooler in some
way? I see them as unnecessary and even not particular user friendly,
they having to be fished for with mice.

--
dorayme
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-13-2012
dorayme wrote:

> These popup arrows are cooler in some way?


No, not at all. I find them ugly and distracting. Whoever invented
them should be invited to a hanging ceremony.

> I see them as unnecessary and
> even not particular user friendly, they having to be fished for with
> mice.


Trouble is, if one is not accustomed to them, one will not bother to go
fishing with the mice and surmise there's only one image to see.

--
-bts
-This space for rent, but the price is high
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Forward/backward overlay arrow MG HTML 0 02-06-2012 06:24 AM
image overlay peter.o.mueller@gmx.de Java 1 09-09-2005 06:34 PM
how to write text on an overlay image? Ross HTML 1 01-06-2005 01:25 AM
overlay text on uploaded picture Brian Lowe ASP .Net 5 06-24-2004 06:13 PM
Image overlay (sent through google, as Outlook Express isnt posting my messages) Lee Harris web HTML 2 01-31-2004 01:10 PM



Advertisments