I don't even really know where to start, because I have looked everywhere and can't find a darn thing. Would really appreciate any direction you can supply on this matter.
So:
What I am looking to do is load 10,000 lines of mysql (image names) into an array and display them every 10 milliseconds from the top left of the screen, and when it gets to the last one, it automatically starts over again. I have supplied a link to an example of what someone else is doing, but they are using an API in realtime from instagram. Anyways, let me know if anyone has any ideas, I'm finding this difficult.
http://saopaulo-now.jit.su/
I also ideally want to be able to hover over to launch mini-video and show enlarged picture as well, but I need to figure out the actual functioning of the image array first lol.
bootstrap isn't a bad idea. I'm using the bootstrap-carousel to do an image area that swaps images.
it's not tough to use and you can alter how you access it. For that many images I'd probably use ajax to pull up the images and have my controller return the image with the current index (+1) to iterate through them all.
lots of variations of how you could implement and there are other carousel plugins you could use - bootstraps seems pretty tight.
here's a gist to help with some samples:
https://gist.github.com/3471760
nothing too fancy. good luck
Related
I want to create a full-screen timeline web application that would scroll left and right horizontally, revealing some html-and-css-formatted text possibly with added images, videos and / or audio files.
The timeline should start at its rightmost position ("today's date"), offering a scroller that would allow user to scroll left to see earlier events, and to scroll back towards the right to see somewhat later events, all the way back to its rightmost position (the already mentioned "today's date").
There's a lot of data to load into the timeline (150+ years worth of events, about 200 pages of text alone) – which makes me think that if I dump all of it into a horizontally formatted, scrollable html page, it may result in a super-heavy page that would take forever to load, may be hard to scroll in some (most?) browsers, and may even crash the browsers. (I may be mistaken, though. Please see my Question # 1.)
So I'm considering the solution when the needed data loads into the page when the page is scrolled "close" to it (on the left or on the right), and unloads again when the page scrolls far enough away from it.
Not being a web programming "guru", I'm a little baffled by the task, and would appreciate a bit of advice.
My questions:
Am I wrong in supposing that all the data should not be loaded into the horizontal page right away? Maybe it's okay to do so?
What would be the more browser-friendly way to handle the overall process: a) spend a few seconds preloading all the data for the entire timeline from the database, and then echo the pieces of that data into a div when they are needed? - or b) only load the pieces of data from the database when they are needed?
How can that pre-loading/printing or loading be actually accomplished with PHP/HTML?
Maybe someone knows an open source or commercial horizontal timeline that already does what I'm describing?
Thank you in advance!
It is up to your case. But I think that idea is great (I just think your timeline look like a gallery, an album,..).
My answer is both a and b . I will load the pieces of data from the database when they are needed(but I will load these data when the page is scrolled "close" to it )
Ex: I'm in 2013 , I will spend a few seconds to load 2011, and 2012 (or last 100 items)
I think that We can load data through ajax.
I really don't know, but I think that you can custom/inherit something from the framework, which was introduced in Raad's Answer.
-5. You can create your own timeline. Maybe You will spend so many hours to do this.
How can we create this timeline?. You can search with keyword : infinite scroller.
I'm not sure if this fits all your needs, but it looks like it might be close - try http://timeline.verite.co/
Ive got an assignment to create an image gallery using flickr - this has to be done using keyword(s) entered by a user in a form, and the image gallery returned must be paginated and display a certain number of results per page. Each image in the gallery must also be a thumbnail.
Im graded based on how efficient, maintainable, consise and clear the code is..
Ive finished the assignment but i think it could be optimised alot better, these are the points that i might be lacking.
All my code is in a single file (the form and the gallery code) - should i separate this?
Im not using oo at all, is there someway i can make use of it here?
Im resizing the thumbnails using html length and width
thanks for any help
This question is really broad, and it seems like you want someone to write the code for you, which I won't do but I'll help point in the right direction.
First, Flickr has an API, I would reccomend checking that out.
http://www.flickr.com/services/api/
You are going to need a library to make thumbnails, you can do that quickly with GD
http://php.net/manual/en/book.image.php
As far as separating the code, it probably wouldn't be a bad idea. One file is great if its a few hundred lines, but if you have a lot going on, it doesnt hurt to separate files by their function (ex: scrape.php, resize.php etc.). That's mostly personal preference. Since you're being graded on maintainability and clarity I would suggest breaking it up.
At the risk of starting a flamewar, I would suggest making it OOP. If you want it to be clear and readable this will help a lot. Break it into classes and functions and group them in a logical manner so someone knows if they need to change something they have a good idea where to start. Document it well and this will help also.
My suggestion would be to create a class for each of these functions:
Grab images from Flickr
Store the metadata related to the images
Resize the images
Pull the information from the database
Display the pages.
Try to keep the data functions separate from the presentation. Use a class to build your pages, and call another class to get the data. This is pretty general advise, but it's something you'll need to know when building future apps. This doesn't necessarily need to be full MVC, but separation of these tasks will make the code make more sense.
First off, I don't have any knowledge about java/jquery/ajax or such, but I think I'm looking for a script in one of those languages, I think..
I want a vertical image slideshow or scroller that is 500px in height, 350px and scroll images vertically. Something like this: http://home.comcast.net/~jscheuer1/side/marquee_v_slide.htm
Unfortunately that script is not continous and the whole frame is set to be the same size as the images. I'd like 4-5 images to be shown at the same time, and I've looked everywhere. I hope someone can help me a little :)
I know I'm such a d*ck who wants someone to do all the "job" for me, but I've searched everywhere and I can't find anything that helps me to figure it out. Usually I know enough to customize scripts and learn a lot from it, but I don't know how to write functions in javascripts.. I always mess them up somehow.. :(
If you can just visit this site http://www.dynamicdrive.com you may find some help. Search for specific scroller's.
Update: your query can been seen with http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm
I'm trying to create a mosaic type script in Javascript and PHP, which makes up a big image with many different images made from small square tiles. The idea was to "fake" the effect by having a background image and laying over the tiles on top of it, and making their opacity 50% or so. This works decently enough, but it definitely doesn't look as good as I want.
My question is, does anyone have any recommendations on alternatives to this method? I know there are definitely ways to do this in Flash, such as the Mario Lemieux mosaic:
http://www.mariomosaic.com/mosaic/
But I would like to avoid flash if possible.
edit: added live example
So I haven't touched the JS layer yet, this has all been server-side stuff. There's no pre-loader or anything really in terms of making it more usable, that will come soon. But here's what I've got so far:
http://www.mtimofiiv.net/mosaic_example/
The little tiny image tiles are created from images uploaded by a user, and they're run through a class I've built to generate them. I used GD2 to make them grayscale so they will absorb the color of the background image better, and I "pixelated" the background image in Photoshop.
If anyone wants to see any part of the code let me know and I'll add it to this post. Also when this project's done I intend to make it available on Github in its entirety for whoever wants to do the same.
Perhaps the fact that your demo HTML is 733KB might dissuade you from this particular approach. I think if you want to do something like this, you really ought to employ the canvas element, and work in some kind of "ajax" loading. That could actually be kind of interesting. However, if you are going to generate this much HTML...you might consider having a client-side script do it, if possible. Just some thoughts...
I am working on shopping cart. pls follow the link www.photohaat.com
In the mug section whenever the user upload the image i want to wrap the complete image onto the mug so that he/she will saw the final output immediately.
we develop this shopping cart on PHP language.
I am trying to resolve this problem but unfortunately can't get a success.
If you have any solutions regarding this than please let me know.
Thanks.
I'm pretty sure there is Linux 3D/Raytracing software that can do what you need, but I don't know any easy way.
Maybe ImageMagick can be of help (only maybe, because IM is focused on 2D image manipulation.)
There is an example of cylindrical mapping that might serve as base for your needs. It also might not, it could well be that it is too limited (no real 3D possibilities of changing the axis, perspective, etc.)
Update: There's also Cylinderize, a script for ImageMagick. It's not true 3D either, but looks pretty interesting:
(source: fmwconcepts.com)
(source: fmwconcepts.com)