Does anyone know of any free frameworks that help you create thumbnails for web pages, that when clicked, the original image loads ontop of the page (modal like), as oppossed to opening a separate page.
Thanks!
This is really 2 questions in 1. The "lightbox" display of the original, larger sized, images in a modal box is handled in JavaScript with a library such as ThickBox. The resizing of the images can be done manually, or via some kind of code on the server side. Sitepoint has a decent guide on how to resize server side with PHP. I hope this helps point you in the right direction.
Lightbox.
http://planetozh.com/projects/lightbox-clones/
I've used DhoniShow a few times in the past, and clients really liked it. It's not AJAX, as it loads all the full sized images on page load, but if you were motivated I'm sure you could make that change pretty easily.
As have been already said, you can use Lightbox to get the effect to the user, I would use it with its ajax mode, loading the thumbnail as its contents.
Now for the thumbnail, I would recommend you something like http://megasnaps.com/ wich you can use for free.
Good luck.
Related
I'm new to web development and not sure how to explain this, I'm building a tool with lots of links and features to help making things at a call center easier but I wish everytime the page is opened it resizes to a small rectangular version. Is there a way this can be done? Thanks!!
Currently I am trying to build such customization of product in Bigcommerce Storefront that allows to display image with dynamic text, which was entered in Textbox. That means product image preview should be shown INSTANTLY with new image with written text.
so that the end user will know how the final product will looks like and also same image should go in shopping cart as well.
I know that there is an app on Shopify named as Product Builder.
Is this possible to do it on Bigcommerce?
Thanks in Advance
It's definitely possible with some fairly advanced client-side code. Unfortunately I don't know of any plug and play systems or apps for Bigcommerce that will achieve what you're looking for, but there are a couple ways to get a live updating product preview if you're willing to get your hands dirty.
Here's an example from my site. Click the button under "personalize this item", and you'll see a live preview image like you describe in the modal. Enter some text and change the monogram style and color, the preview image should update pretty quickly every time you change an option. A solution exactly like mine may not be feasible for you, since that site is using a pretty complex React/Redux implementation built on an extensively customized Stencil theme... it's far from a turnkey solution. That said, you could implement something similar without needing a totally custom app.
The image preview itself in the example above is powered by IMGIX.com. They offer a great service at a fantastic price. Basically my system translates the user-selected Bigcommerce option into a URL string per IMGIX's URL-based API. Displaying the live preview is then as simple as changing the image's src attribute to the corresponding IMGIX URL on every input change. I do this in a React component that consumes a Redux store, but something similar could definitely be done in the framework of your choice, or plain old vanilla JavaScript. Cloudinary offers a similar (maybe even a little bigger) feature set to IMGIX, but I found IMGIX to be a bit faster, and the pricing was considerably less for my usage.
You could also write something that uses the HTML5 canvas to overlay text and effects on an image, and thereby avoid using a third-party service. I found such a solution to be way more work and way more taxing on the client-side device, but it'd definitely be another way to skin the proverbial cat.
There may be other viable solutions out there, but the above has been my experience in implementing something similar to what you're looking for on Bigcommerce. I hope this is helpful!
I have a web app I'm building in Dashcode, currently every thing is working as advertised. I'm using the browser template and was able to modify it a bit, got the xml working to connect images and their description. Now I want to add a simple OnClick event that sends the image to fullscreen but I can't find any documentation for that. I'm pretty sure this is easily done so I'm missing something here? Any help greatly appreciated.
Tom
Taking over the screen is a bit complicated (if your talking about a full screen experience like youtube), but full screen in the browser window is defiantly possible. The simplest method is to have the click event open a link to the image location. This would load the image in full resolution in the browser window. A more elegant approach would be to load the image url into the source of a image dashcode object. and have that objects visibility only appear overs the whole web app when the Oncick event occurs. If you are talking about a built in function in dashcode to achieve a full screen/browser image, your out of luck.
You know how sometimes you are on a good site and you click a button (like to submit a form) and the form doesn't go away, instead, the foreground becomes transparent and it contains a message of some kind, or another page. The message is at the forefront but the previous page is still mostly visible behind it - how do they do that? I'm assuming it's an Ajax-esque trick.
This is called a light box modal. There are quite a few JS plugins that can do this including Lightbox and the JQuery UI Dialog to name a couple. I just recently started using Fancybox and have been very impressed with its speed and configurability.
Here is a pretty good (not all inclusive) list of them:
http://spoonfedproject.com/jquery/extensive-list-of-jquery-lightbox-modal-plugins/
One way is to use GreyBox. I think this similar to the effect that you're talking about.
Anyone know of a Flash file (image) uploader that will force a user to resize and/or crop their image BEFORE uploading it? To then upload it as well.
Basically, I don't want my server processing the image resize/crop. I want to specify a target aspect ratio and have the user resize and crop their image to make it fit.
I've seen cropping uploaders before but they all seem to be server side. I saw a Flex one but I'm not sure it's "mandatory" -- Basically if the user just uploads the image without making edits, then I'd like the Flash to scale and fit the image into set dimensions...Leaving it I guess short in one direction to not stretch.
Anything like this out there?
Thanks!
I have a bounty running with a very similar question, be sure to take a peek - there isn't anything there yet that does client side resizing, though.
Also, SWFUpload is said to support it in the new Beta, but the feature is very sparsely documented right now. You would probably have to work on it to get it running the way you want.
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
there was another one called resize before upload but the site went down. though while I'm updating this and we're on the subject -- I don't see why you'd want to use Flash these days for this task. There are plenty of JavaScript options and now we also have Google's Dart (which builds JavaScript).