OK, I put this on the PHP forum but have not gotten anything back that is going to do what I would like so am “cross posting” here so I hope I don’t get in trouble but do need the input/help to move this forward. It appears that with no real solutions for the last couple of days that php probably will not work for this.
So, I have a site here that when the user selects the year and name (many thanks to Pullo for helping me with this), then presses Submit, a new page comes up with all the images displayed that are stored in the database (db) for the
submitted information.
Now, on this new page I want to be able to click an image, have that image increased in size (for better viewability) and have a text/edit box appear under it with the current caption information (from the db) and that box will be editable and saved back to the db when either exiting the page or clicking another picture or even clicking a submit/enter button (that is optional at this point). Make sense??
I am at a loss how to get this done and would appreciate any input.
It is in the first post (the word here in the second paragraph). Just select a year and name then Submit. The next page shows the images. After that I am stuck as I don’t know javascript very well (as you have seen).
Ok, there’s quite a bit going on and I’m short on time so this should get you started. It toggles the image size when clicked (and collapses any others). This assumes that all the larger images are stored in the same path as the thumbs minus the “/Thumbs/” folder.
Here’s an outline of what else you would need to do get in the rest of your functionality:
On the PHP side, you’ll need to attach meta information to each image such as the database ID etc, this way we know what DB entry to update the caption on
Add an empty form somewhere. I wouldn’t wrap the images with it, just literally toss an empty form somewhere with `method=“POST” action=“yourfile.php”
Extend the click event below to transform the paragraph tag into a text box populated with the current caption
Submit the text along with the image ID to the form (using jQuery) to update the database
Preperation
Toss jQuery in right before the closing body tag </body>.
The Code
Add the following into a <script></script> tag located after the jQuery script above. I tested this on your site by dumping it into Chromes Dev Console. If it doesn’t work let me know.
<script>
jQuery(function($){
var $img = $('img') // Caching to speed things up a bit
/**
* Remember the thumb/original sources
* - This assumes the original image is located in the same path minus "/Thumbs/"
*/
$img.each(function(){
var $this = $(this)
$this.data('src-thumb', $this.attr('src'))
$this.data('src-orig', $this.attr('src').replace('Thumbs/', ''))
})
/**
* Make bigger on click
* - Reset other images to thumbs
* - Resize this one
*/
.click(function(){
var $this = $(this)
// - Reset other images to thumbs
$img.each(function(){
collapseImage($(this))
})
// - Resize this one
if(!$this.hasClass('large')){
$this.attr('src', $this.data('src-orig'))
.addClass('large')
.width('100%')
}
else
collapseImage($this)
})
/**
* Collapses an image
* @param {$EL} $img The jQuery element to collapse. Must be a single element!
*/
function collapseImage($img){
$img.attr('src', $img.data('src-thumb'))
.removeClass('large')
.width($img.attr('width'))
}
})
</script>
Thanks, this worked but how would the picture go back to the thumb size if the user clicked on a blank spot? I would like it if the page could get back to all small images - with captions as soon as I figure that out,
OK, I am officially stuck. Can someone advise me as to how to do the items that labofoz mentioned. Do you use ajax or jquery or both or ??? How do I put the form in and does it need an input/submit?