Offering User Dynamic Image Views

[fedoracore]

to make it simple, what i want to do is offer the user a way to "click for a new image"the actual project is as follows: i'm building a site for a friend but i want him to be able to pick out his favourite font typeface for the text i will use in the "header image". i've already created several sample images for him. i have a nice little program i made for throwing the thumbails up there in a dynamic grid (vs a static table), where each thumb is clickable to the full-size head image, but there's something about actually looking at the header in the place where it might finally reside which makes the viewing not only more effective, but also a little less boring (in my opinion, at least).what i was thinking it would be is like this:click here to flip through the head images. simple. straightforward.i tried using a flat file to record the image key, as the thumbs / image grid is displayed using a function which essentially loops through a glob() array... but i gave up on it because i couldn't get it to work. i don't know if i'm doing something wrong w/ the different fopen() based techniques, or if it simply isn't going to work that way (no matter what i tried [in my inexperience with those methods] i could not get the key to increment, nor could i get it to change at all for that matter when using any of the numerous fwrite() tactics i tried.thaks for reading. i look forward to reading any ideas you might have for this. since you never know who's going to have javascript going, i want to stay away from the client-side scripting methods-- especially since this guy is not savvy enough to know how to manipulate the javascript settings of his browser.(sorry so lengthy. it's early. the coffee is STRONG! holy cow!)

[justsomeguy]

Since Javascript is enabled by default, I would go with that. Either that, or have each thumbnail just pass its own filename in the URL, and have PHP reload the page with that image in the header. It would probably just be easiest to hard-code all of the thumbnails and filenames on the page. There's not much point to making it load the list of images dynamically, you're not going to be updating this page very often right?

[fedoracore]

just pass its filename in the URL, and have PHP reload the page with that image in the header

why do i not get this? (oh, i'm slow!). if you have a sec... (unless i try, catch on, and delete this first), would you please embellish a bit here. i'm having a real brain block on this. burned out i guess [on this project i mean]

It would probably just be easiest to hard-code all of the thumbnails and filenames on the page.

even at over 80, and possibly counting? yeah. i'm nuts. but that's another issue. so-- there are a lot of items here. furthermore-- i'm always thinking in terms of "reusable code"-- gets me into trouble sometimes and bogs me down, but in the end, i have something that might be useful elsewhere. e.g. classes that only serve a purpose of iterating to test arrays, etc-- removed later. -- that's kind of teh idea i have w/ this thing. i can store it away, and next time say to someone else "hey, check out these examples-- choose what you like"it's also completely worthless material in the grande scheme of the site.... but i guess you understand that. the value i seek then really is trying to learn a way to do this.... if that makes any sense. i hope that's not annoying, but it's the only way i ever progress at stuffwhat about using a _SESSION?i'm also linked up to MySQL... maybe i'll just try to do something there. and finally-- after testing some stuff whcih i had working-- where images were different each time i looked-- i got this idea of "it would be cool if each visitor saw something different each time he or she... came to the site..". like a different color head. i did something like that w/ GET and css-- maybe that's what you meant above... but that won't allow the "click for a new image"... or-- wait, maybe i just need to do an array w/ GET -- and the images can flip through each iteration via the key which GET would increment...! is that what you meant?

[justsomeguy]

Yeah, something like that. If you have a table of thumbnails, then the link on the thumbnails should look like this:<a href="?header=header1.jpg"><img ...></a>So each thumbnail sends the name of the header to load in the URL. Then, you get the name with $_GET and pop it in the header. I guess it's up to you how you want to build the list of thumbnails, if they come out of a file that you read, or from a database, or are just hard-coded. But passing the name that way is probably the easiest.

[fedoracore]

Yeah, something like that. If you have a table of thumbnails, then the link on the thumbnails should look like this:<a href="?header=header1.jpg"><img ...></a>So each thumbnail sends the name of the header to load in the URL.

ahh-- i see now. thanks for this idea. i hadn't thought of that at all... i'm taking a totally different approach. have a look.

<img	class="<?php print $bodyid; ?>"	src="<?php print XRO."images/title/thumbs/".$newrandimg; ?>"	alt="blah blah Music"	longdesc="blah blah Music Store in blah blah"	id="randimgpicker"/>

kinda schizophrenic, huh? as you might imagine, i was originally just letting the header change randomly as he moved about, looking at different test pages (i.e. $newrandimg...). the dynamic resource is coming from a class which uses glob to scan the image dir. -- probably why i'm so turned off by the hand-coding the thumbs-- because i barely have to do anything to get both the thumbs and their linked images on the page for viewing -- roughly 180 things i didn't have to do... essentially.it was kindof working to demonstrate the different typefaces, but as random things tend to do-- something is always left out, and something is coming up too often. i added the "click here" button to improve the statistics- -- but it merely reloads the page n changes the object data to a new resource -- which itself is yet another random image because that's all the method can do. i broke down and decided i would try to make this "previewing mechanism" more structured-- especially since the "click here" button appears on the thumbnails page too, where it becomes too obvious that the head preview is not following the thumbnail grid (ie. the table of thumbs [really css floats] is using natsort ). so i made a mountain out of a mole-hill because i had to keep trying to make the stupid thing "perfect". by now it's just got me in grrrrr mode. the worst part is-- dude will probably not even spend more than 30 seconds on it. haha!sorry for the mile-long explanation, but it wasn't going to make sense otherwise.

[jesh]

the value i seek then really is trying to learn a way to do this.... if that makes any sense. i hope that's not annoying, but it's the only way i ever progress at stuff

If you don't want to use client-side script at all, then justsomeguy has got it with:

<script type="text/javascript">var header;function toggleHeader(href){    // this is the DOM object for the header img element    header = (header) ? header : document.getElementById("theHeaderImg");    // make sure the link is in "?header=imgpath.jpg" format    if( href.indexOf("?header=") > -1 )    {        // strip off the "?header=" part        var imgPath = href.replace("?header=", "");        // and assign the image path as the src of the img element.        header.src = imgPath;        // return false to prevent the hyperlink from sending the request.        return false;    }    else    {        // the link didn't have "?header=" in it, so let's return true and let the link        // perform normally        return true;    }}</script>

Then, in your HTML/PHP, you could have the thumbnails look like this:

<a href="?header=header1.jpg" onclick="return toggleHeader(this.href);"><img src="header1.jpg" /></a>

If javascript is enabled, the visitor doesn't have to reload the entire page to display the new image - s/he just has to wait for the image (unless you pre-cache it). If javascript is not enabled, the onclick event is ignored and the page loads as justsomeguy described.

[fedoracore]

If you don't want to use client-side script at all, then justsomeguy has got it with:

<a href="?header=header1.jpg"><img src="header1.jpg" /></a>

w/out trying it-- does this require hard-coding the thumbs names into the anchor element (re: justsomeguy's code example)? or does it work with the dynamic (or loop generated) image names, as in:

header1.jpg// ## would become$newrandimg// ## therefore:<a href="?header="<?php print $newrandimg; ?>"><img src="<?php print $newrandimg; ?>" /></a>

not sure if my head's on straight here-- but i'm thinking that a combination of the justomeguy code, and using either my loop or my random image Method to generate the jusstsomegy anchor (as i've shown above) might enable the use of, as you said, the javascrpt event handler. something for me to look at i suppose. remembering of course that part of the goal is to eliminate the need for the programmer to code-in every image anchor-reference, but to let php and glob() do it for himsince i started this thread, i've actually totally recreated this bit, so it's kind of irrelevant to the project by now-- but an interesting technique to try nonetheless-- assuming this is something anyone would ever need / want to do elsewhere. :)my solution (which is unlike what we discussed here) was as follows:since the thumbnails are displayed using an array, i duplicated that array, using the keys in the HTML form select/ option values. the user selects the thumbnail image of his choice based on the thumbnail array key number (which is now printed next to each thumb)

[justsomeguy]

w/out trying it-- does this require hard-coding the thumbs names into the anchor element (re: justsomeguy's code example)? or does it work with the dynamic (or loop generated) image names

There are no requirements. All we are doing with PHP is dealing with data. The data we output is typically a string of text that happens to form HTML code since we are sending it to a browser. It doesn't matter if that data is hard-coded, or created from strings or whatever. All that matters is that the browser sees HTML. If you want to hard-code the HTML you can do that, or if you want to use PHP to generate dynamic HTML you can do that too, the bottom line is that the browser needs HTML. PHP is just one way to create it.