So looking at your downloads, you didn’t use my html code at all. You need to:
- change the target large img to “data-src=” rather than “src=”
- Add the class “.bigImage” to those images
- Include the script line for the JS code
1 Like
It isn’t that I didn’t use your code, I was just reading through things and tryng to figure thigs out when you posted back.
I will make those updates, but I’m still thinking we are missing some things.
Maybe I’m wrong?
Trying to learn asap!
I made those changes for the 1st < li > and now the detailed-image doesn’t load in the modal window.
<img class="bigImage" data-src="images/img_3325_med.jpg" alt="" >Let’s see the code. I have the thing working here, so there’s something missing. Have you linked to the JS code? Any new errors popping up in the console?
That html looks right…
Here is v02 with this code added to the 1st < li > for proof-of-concept…
<img class="bigImage" data-src="images/img_3325_med.jpg" alt="" >If you have it working, what about the version I posted in Post #21 that uses PHP?
sp_create-src-link_v02.zip (7.4 KB)
I see two php files in the zip file. Which one has my JS linked?
“sp_create-src-link.php” is the version where I took out all PHP and hard-coded the photos.
“sp_photo-gallery-snippet.php” is a thin version of my actual code and it includes all PHP you would need to help me out with this. If you didn’t see Post #21, I included it because the link that Javascript is going to build will need to grab my PHP variable for the $photoKey in my PHP foreach that builds the gallery.
You never said anything about “linking” (i.e. <script> </script>) so I assumed that your Javascript can be read on its own.
Please see post #5, way back there. I gave you an update to the JS file and said “your JS file needs to look like this”. JS needs to be linked via a script command, and you’ve done that before, so I guess I just assumed you wouldn’t take my comment to mean “delete the JS reference”. Leave it in there, update it as I showed.
Rolling this back to the php source will be simple, you just need to:
- Change the “src=” to “data-src=”
- Add the class for “bigImage”
- Leave the JS link where it is
1 Like
In my IDE, I have a folder called “sp_create-src-link” (That is nested down in a project public_html.
And in “sp_create-src-link” I have a “scripts” folder and at the same level my “sp_create-src-link.php” script.
In my script in the < head > I added…
<script src=scripts/buildSrc.js"></script>When I run my script and I click on the 1st thumbnail, the modal window still does not display an image.
Are you using all of the thumbnails and medium-sized pictures I uploaded here? Because I added label to them, visually they are quite instructive of how I named my thumbnails and medium-sized pictures and how my PHP works.
I have lots of questions about your code, but will hold off on those until I get things working on my end.
P.S. To be clear, anything I zip up and send is alreadt n a folder structure that works - well at least my code parts work.
Just a few random thoughts 
What happens if JS is disabled?
What is the point of having a css only modal effect if it cannot display the image with css as you have removed the source ?
Your page should first be usable without js present and then enhanced when it is active.
In effect the css modal affect using :target is redundant for your use case and perhaps would be simpler with a straight forward js modal to start with?
Regarding the use of :target what happens when a user tries to link directly to the image with a fragment identifier? The JS won’t run and they will get a broken image. (The same may occur when the back button is pressed and you arrive back at a fragment on the url)
Much to consider and most is outside my scope but thought it worth mentioning:)
1 Like
Perhaps the following article specifically about lazy-loading images will be of some benefit.
2 Likes
Move that line down to the bottom of the page, and make sure it’s not missing the quote.
2 Likes
I wasn’t expecting to see our resident HTML/CSS guru in a thread about Javascript, but I’m glad you stopped by!!
Then I’m screwed…
It’s “complicated”…
Um, I have never learned Javascript because I think it has ruined the Internet. For my business website that got put on hold, I wrote it purely in HTML/CSS/PHP because of my disdain for Javascript.
So you are preaching to the choir.
But, alas, I seem to be painted in a corner… (Would love for you to show me how to fix my issues purely using HTML/CSS!)
So, Paul, since you were nice enough to stop by, let’s back up and talk about what I set out to do and how I ended up in this ugly situation…
We had a nice Diwali Celebration and Holiday Party at work, and I intended to take a few snapshot and ended up shooting over 2,500 frames?! (Kinda hard to share via email!)
So during Christmas Break, I figured I’d build a simple website to share the photos and videos.
Well, I’m a perfectionist and little things never stay “little” with me for long!
One requirement that I insisted upon was that i wanted visitors to be able to click on the < audio > player in a given gallery, and jam to a cool tune while browsing the photos. But as I discovered in my original design, having the < audio > tag and the thumbnails on my “photo-gallery.php” page and then redirecting users to “photo-details.php” to see an enlarged photo worked great as far as viewing photos, but it (literally) killed the music.
So I bitched about this and @coothead came to me rescue (?) and showed me how to use li:target to transform a boring photo galelry with thumbnails into a modal window with an enlarged photo all on one page and with the msuic never missing a beat (pun intended!) in the background.
Life was good, until I uploaded my website and photos to the webserver, and then discovered that it took up to 5 minutes to load my “photo-gallery.php” page because secretly all of those enlarged photos (500MB each) were also uploading in the background.
My website was UNusable, and I was CRUSHED!!! ;-(
Furthermore, while I have learned a lot of useful things that i can use on my business website which I hoped to wrap up in January, I have pissed away the last 4-5 weeks and I have nothing usable to show for it?!
If there is a way to save this “fun” project - ideally NOT using Javascript - that would be ideal. But at this point, I am ready to walk away from a website 95% done and just chalk it up to a failure…
(Proof perfect that I am living in the shadows of so many SitePoint gurus…)
Ultimately, I gotta get back to my e-commerce site this coming weekend, and get it done ASAP, or I may lose that opportunity as well?!
sigh
Okay, I have heard that term before, and read up on things.
Am curious to see what @PaulOB recommends as to what I should do… (He brings up some valid points about what to do when Javascript is shut off…)
Can this fun photo website be saved considering it is 95% done?
Or is this case where I still have much to learn, and in reality it will take me weeks or months to learn what I need to create a usable website?
(Wow! I sure have gotten my butt handed to me on a website that is basically only 4 web pages long?!)
hangs head in failure
There is a fundamental principle called progressive enhancement. Before that it used to be graceful degredation, where you start with a complex build then redesign so that it works when parts are not available (such as no css, or no javascript).
Progressive enhancement is a much more reliable way of doing things, where HTML is the fundamental bedrock layer, then you add on CSS to make it look better, then you add on JavaScript to improve the user experience. Each one not relying on the other, so that if anything goes wrong (such as a file failing to be transferred over the internet) then your page can still keep working with a minimum of impact.
Building your own custom photo gallery is a difficult and challenging task, Developing for web browsers is amazingly difficult. It’s said to be the most challenging environment to develop in, because everybody has different web browsers with different capabilities. Some use cellphones, some ipads, some computers, some tv’s even.
I look forward to what @PaulOB has to say about the idea of lazy-loading too.
2 Likes
Hi there UpstateLeafPeeper,
I notice that you keep crediting me for your
use of the “Modal Window” method.
But I did make it clear to you at the outset of
your project that I thought that the thumbnails
should open the larger image in a new page.
You rejected this solution because it meant that
your visitors would not have audio continuously
audible.
You are now reaping the rewards for making,
what I believe to be, the wrong choice.
coothead
2 Likes
Well, I was trying to compliment you on teaching me a cool new CSS trick, and I certainly am not blaming you for the corner that I am currently painted in.
But to your last comment, my response is, “I am the Customer, and I want what i want!”
“No”, “can’t”, “impossible” aren’t in my vocabulary - especially when it comes to IT.
So maybe I went down the wrong path, but there has to be a way to meet the following requirements for a photo website…
- HTML/CSS first.
- Uses PHP.
- No database.
- Prefer not to use Javascript, but will stay open-minded.
- Website should not break if Javascript is turned off!!!
- Needs to be “responsive”.
- A user should be able to go into a gallery, turn on the audio player, and listen to the pre-selected song for that gallery (e.g. “Happy Holidays” by Irving Berlin) in an uninterrupted fashion while viewing either thumbnails and/or the corresponding enlarged photos. (I don’t care if thumbnails and the enlarged photos are on separate pages, but the song should never miss a beat!!)
- Having to launch a separate web page or tab to allow the music to keep playing is a little too “clunky” of a design for me. Sorry. (On a professional website, you’d never see that.)
- Photo gallery needs to load in a reasonable time-frame, especially for desktop
- Enlarged photo should display in a reasonable time-frame
That’s it.
I thought I had accomplished all of this until I uploaded it to my webserver, and then the page load times made all of this effort a total failure!!
The other Paul answered those questions and my take on it is much the same. The way I would go about it is to start with just a thumbnail image and then link directly to the large image which will appear on another page. This gives you a working page at the most basic level as images are available but on another page.
Then with JS you change the link to the larger image to trigger your modal instead and then in your modal you add with js the correct source for the larger image which as tracknut has shown can be held in a data attribute. I would also add a dummy source for the original image using a data uri of a 1px x 1px blank gif so that the image tag is valid and does not need a server request. All this should be achievable keeping close to your original code.
Just as proof of concept I have uploaded the rough idea I outlined above and posted it here.
http://pmob.co.uk/temp2/gallery-hash2.html
It uses your html and css but with a few data attributes added and a new class to the full size image. My JS is very basic and @Paul_Wilkins will probably say that it has many issues but I post it for interests sake only in the hope that someone can make it better
That’s about my limit
On a different tack you could use background images instead of the image tag and then you could do that in pure CSS without JS but of course won’t be semantically correct and you would have to force the images to all fit in a standard size container and then use background-size:cover to make it cover the element. It’s not ideal but may be a choice if you have images that are roughly the same size.
Yes I guess that would be a way forward but is too complex for someone like me to implement properly.
1 Like
But what about the music?! That is what started this whole problem!
I had a working website with a 1-2 page approach (photo-gallery.php ===> photo-details.php), but I was insistent that people could jam to the same tune uninterrupted while browsing…
If I am hopping between pages I assume that kills the music, right?
(To be clear, I have no real need for a modal if I can keep my music. The modal was just a “means to an end”)