I want to have a photo album on my website such as this:
http://www.yelp.com/biz_photos/B9S9wNChMFRz6IAL_0n6pA?select=ADeqFE2Tj2s7eM8WuQibbQ
I'm looking for something where the photo that is displayed is also highlighted as thumbnail below that so that users can select photos rather than having to click next.
Also, I want to be able to have multiple photo albums so each set of thumbnails is different. Perhaps something where the whole page doesn't have to reload, but just the photo itself and the highlighted thumbnail?
I've done some research but I'm unsure of which type is best ie- PHP, javascript, etc...
I only have experience in HTML, CSS, and basic javascript and limited PHP.
I'm hoping somebody can point me in the write direction as to what to look for.
Thanks
Learn jQuery.
http://www.jquery.com
Rejoice!
http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/ <-- take your pick.
The jquery cycle plugin is fantastic and super easy to set up:
http://jquery.malsup.com/cycle/
and specifically it has the ability to do auto-thumbnailing as navigation:
http://jquery.malsup.com/cycle/pager2.html
If you know CSS you can take it from there.
As I myself am not the best (but still trying to get better!) when it comes to the more UI related technologies (CSS, JS, HTML etc), I have found using popular libraries such as JQuery Tools to be quite helpful and very easy to use. I believe the widget below matches up with what you are looking to do, and it also comes with a tutorial and helpful customization examples:
http://flowplayer.org/tools/demos/scrollable/gallery.html
Best of all I think JQuery Tools and Flowplayer are open source, so that means once you get the widget working, you can also delve into the code to try to gain a better understanding and hopefully one day take your own crack at a similar solution.
Good luck!
Related
I am using Impress Pages and currently using the theme "Air." At the top of the page, how do I move the picture to the center of the page. Secondly, below the picture, I have added text; how do I increase the font size? Thirdly, is there a way to change the white color in the center box to another color?
Everything you can modify in templates existing CSS file or you can create new one and include it in template header.
Before anyone else down votes your question, I have some suggestions which I hope you'll take seriously. First of all, as I understand from your questions, you have very limited knowledge about HTML, CSS and probably none about JavaScript. Follow these links (many people may disagree with my suggestion on w3schools, but that site is the best place for beginner - as I began my journey with that site - in my opinion. Feel free to suggest more) and have some study first. It'll take some days considering how much time you'll invest on that study. Then you'll have a general understanding of how things work and will be able to ask specific questions about your problems.
Building web sites may at first seems an easy work. But as you begin learning stuff you'll realize that to create some serious stuff, takes many years of practise. So, after following those links and having some general idea about how html and css works, you can go install a Wordpress or Joomla site and use some free stuff which are even used by the experienced developers to save time on development simple sites with simple requirements.
Also, using StackOverflow, you have some rules / recommendations to follow. If you take a moment and follow them, your questions will be much appreciated and you'll be able to benefit from other people's experiences.
I am just trying to help here, as I was (and everyone in this community) a beginner once.
Good luck on your journey!
Down and dirty method in the admin panel (while figuring out later how to modify code in ImpressPages):
Drag the image icon to the content area, and insert the image.
Drag another image icon to the left of the new image, but do not insert an image. Drag a second one to the right of the new image...using both of these as placeholders. ImpressPages automatically divides the available space, leaving the image centered.
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 know there are lots of gallery scripts out there, but I don't know if any of them will fit my needs. I'm looking for something extremely simple that I can seamlessly incorporate into an existing website to replace the old manually updating every page method. There are 4 categories and an archive, and I'd like to be able to give a title and description to each photo, and search within the 4 categories, or the archive.. The current gallery works with a list of 8-10 thumbnails per page and when you hover over them, a large preview shows up in the empty space at the right. The title and description for each photo is added in photoshop to each image, which is a big reason to update this (this was done by the original web designer, not me).
The server runs linux with PHP and MySQL.
Does anyone know of something that fits my needs, or is simple enough for me to modify to meet my requirements?
Thanks
Edit: Thanks for the replies, but these aren't really what I'm looking for; sorry for not making it clearer. I want a CMS type system where I can easily add the photos through an admin panel and then have the front-end a bit more up to me.
My personal fave, not so known but very stylish and easy to use:
http://www.pirolab.it/pirobox/
One of the most widespread and very easy to setup is Lightbox 2:
http://www.huddletogether.com/projects/lightbox2/
There are a ton of others, you can google for "lightbox script"
and find something that maybe fits your taste more.
But for these 2 I can say from personal experience that are
stable, work nicely and easy to use.
I set up something for my wife to link work samples during a job search. I used smoothgallery ( http://smoothgallery.jondesign.net/ ) which is very lightweight. It is just the gallery UI essentially, and basically rewrites the DOM for a specially tagged unordered list if I remember correctly. So the gallery organization is up to you, but its as easy as a little php + mysql to output the list.
I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.
The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...
So yeah, pretty much any advice/tips/thoughts/help would be really handy!
I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:
set the display of the element to none
get the full height of the element, something like:document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.
The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.
Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.
If you're not a fan of javascript, then use a library, it means you have to write less.
I have some animation I would like to try, kind of a shopping cart/checkout action animation. wanted to know if flash or jQuery (JavaScript) would be best?
The backend is all in PHP and I was thinking of using AMFPHP (If Flash) or jQuery (Any frameworks???) but wanted to know the drawbacks/features of each approach.
Thanks for any advice,
--Phill
--UPDATE--
Okay so the animation I would like is when something is purchased to display some text and a image of the item in some sort of slick animation. Want to give it that Flash feel but maybe I could do this in jQuery?
-- UPDATE--
Would like it to have a TV commercial feel but interactive, not sure of the animation(s). Clean, Crisp, Fresh, etc...
JQuery is better because it's easy to program a compelling experience with just notepad. My rule of thumb is "If you don't need flash, then don't use flash." Also a lot of people are using iPhones to surf the internet now, you don't want to alienate that market by plopping a big flash hurdle in front of them that they can't jump.
Check out Themeforest.net and see what designers are doing with just JQuery. It's pretty amazing how far we've come with just simple javascript.
A lot of animation that we typically turned to Flash for can be accomplished via jQuery. Obviously, frame based (onion skinning) type animation (characters, cartoons, etc.) is still best left to flash, but nearly any type of animation you'd do in flash with tweens (position, size, color, opacity, width, height, etc.) can easily be accomplished with most of the modern .js libraries including jQuery.
So, yes, jQuery would certainly work depending on the particular type of animation you are looking for.
UPDATE (per your updated info):
"TV commercial feel but interactive"
What does that mean? If I were to interpret that literally, what you want to do is produce actual video based content and wire it up in Flash.
However, that seems like a heavy overhead to just check out of a shopping cart. I'd really think about this from a UX perspective before going too far down this path.
"Clean, Crisp, Fresh"
So not dirty and blury? ;)