I have a website which shows a slideshow of pictures using JS.
The pictures objects are coming from a web service and are being updated from time to time.
In few days, I doing a test with a potential client to present the pictures slideshow on his big LED screen.
He's using BSPlayer for the content on screen, an able to present a website, but it will never be a clean full screen (the X button and such will always be presents).
He's the most comfort with presenting a video rather than a website.
One of my ideas of solutions was to check if there is a way to stream a content of a website.
Googling it got me to a solution combined ImageMagic and FFMPEG which you can read about here
My problem is that this solution only creates a slide show out of static pictures - which I can do, but i'm losing the dynamic part of my live slideshow.
Is there a tool for capturing websites and converting them into a stream of videos?
Or maybe a workaround to achieve the same functionality ?
Related
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 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.
Can any of you help me to be able to show pictures as fast as facebook does!
Facebook is incredible to watch pictures at, because the pictures are kind of preloaded I think.
Often ved you view galleries on other sites, it is a pain in the a**, because it is so slow every time you change picture.
I think you need javascript to do it!?
Depending on your implementation, you could do this with some ajax and hidden dom elements.
Suppose you have a gallery with a slideshow.. You could insert a hidden dom element with the picture next picture of the slide show for each load. This would cause the image to be loaded. If you then were to use JS to insert that same image tag later, the browser would rely on it's cache rather than fetching it form the server since it already has that photo.
This is kind of a broad question but I think this approach would work. You would probally be better off not reinventing the wheel and seeing what Image prefetch librarbies based on JQuery or whatever are available to you..
Facebook compresses images to extremes. Try it yourself, take an image you are having trouble with and upload it to Facebook. Then check the size of the image, you will know why. Once I did a small test by uploading 17429 bytes image and it compressed it to 18757 bytes, a complete 7% increase from the original size!
At that compressed size, you can implement some sort of prefetch next image for display. Along with, I think, they have extremely good infrastructure.
Facebook uses Bigpipe, there is an open implementation in the works called openpipe
Bigpipe pushes the content to the browser when server stopped processing, so user will notice that it is faster.
It basically loads pagelets, when they are ready for the user, at the browser the implementation is Javascript based, and you must push the info to the client with your preferred server language.
First of all, facebook heavilycompresses images. Many other websites don't. Facebook also has a faster network than most other websites.
With the small image size, the client can prefetch the next image.
Preloaded would mean loading when the page is loaded, which is what happens with an <img> tag. No, it's simply because the file size is smaller.
If your wanting images to be viewed quicker on your site first make sure the images are decently compressed and aren't any bigger than they have to be. The amount of times I have seen websites using an extremely large image scaled down to fit in an element 5 times smaller is just ridiculous.
You can check out these sites that has many implementations and links on how to pre-load / pre-fetch images (css, JavaScript, ajax)
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
Since your question was tagged with 'jquery' here is one just for that.
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
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.