I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.
Related
How to create a screenshot of an application that has horizontal scroll or scrolling in the form of a slider?
I would like to take a full screenshot, not just the first screen. For example, from applications like below.
https://piscinasdecemento.com/
https://studiochevojon.com/
Is it possible?
I worked on a similar project with HTML 2 CANVAS. it's a powerful library for generating images or pdfs from webpages. Good Enough you, don't need any backend to do this. Only Javascript is needed (add some JQuery if you want).
check it out here
https://html2canvas.hertzen.com/
You can also try out other Javascript Libraries similar to html2canvas
here https://openbase.com/categories/js/best-javascript-screen-capture-libraries?orderBy=RECOMMENDED&
I'm currently doing a project which is an interative website for a "company". My idea was to use an image of the company room, where they work and use it as the background for the website. The problem is that i wanna do it like a point and click game, where i move my mouse and as soon as I step into something it will pop up information about that something. For example, a written board at the bottom right side of the picture talks about a meeting they are doing, so as soon as my mouse goes over that board it would pop up something talking about that meeting. My difficulty is that i don't know how to "split" the image into those small things (the board, the 3 desks, the posters on the wall...).
The idea is to use an html base and use JavaScript auxiliated by jQuery.
Any help would be appreciated :)
PS: can't post the image because I still don't have 10 reputation.
This link has pretty much example what you want. You can use css :hover on the areas to detect when the mouse moves over them.
Hope that helps!
I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want
I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.