Jump to content


Photo

Huge jQuery Question! Full Browser Slider?


  • Please log in to reply
14 replies to this topic

#1 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 05:14 PM

OK, new to the boards.

I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can.

Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click.

I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way).

The best example I can share is this: http://j.mp/5U79i1

What he is using is flash based (slideshowpro director and slideshow pro for flash).

Not interested in flash for this personal project.

Any advice would be hugely appreciated.

thanks in advance.
  • 0

#2 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 05:38 PM

What about a lightbox? Jquery lighbox.
  • 0

#3 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 05:42 PM

Thanks so much for the speedy response!

I've implemented lightbox and unless I am incorrect essentially pops up a larger view.

Seeking to have the images fill the frame as in this example, in fact wondering if I can build the entire site with jquery to function like this: http://j.mp/5U79i1

What about a lightbox? Jquery lighbox.


  • 0

#4 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 05:52 PM

Ahh sorry my iPhone can't see flash. What about http://css-tricks.co...AnythingSlider/ if not I'll look later on my desktop.
  • 0

#5 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 06:06 PM

OK I looked. I dont see any sliding happening though. Let me show you things that I've done that come close and you tell me what look good.

But do this so it takes up the whole screen
http://www.visibilit...ontent-swap.php

http://www.visibilit...roller-demo.php

http://www.visibilit...els-example.php
or with jquery
http://www.visibilit...g-tabs-demo.php

an old stu demo I had lying around
http://www.visibilit...ry/gallery.html

http://www.visibilit...th2-example.php

http://www.visibilit...allery-demo.php

or the lightbox
http://www.visibilit...ncybox-demo.php

Thats pretty much everything I have that comes close.

Edited by Eric, 09 March 2010 - 06:13 PM.

  • 0

#6 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 06:13 PM

Neither can mine! And with the new iPad, won't be able to see it there either.

Ahh sorry my iPhone can't see flash. What about http://css-tricks.co...AnythingSlider/ if not I'll look later on my desktop.


  • 0

#7 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 06:17 PM

Eric, thanks for taking time out.

The images on that site slide via clicking the + or -. The sliding is in flash.

Guessing if there is a way to create a full browser slider, that would be a start. Then be able to have it user controlled (you know click to slide in the next).

From there, would need to figure out a way to have a menu sit to the left above the images that are sliding in.

Easier to think it, then make it.

OK I looked. I dont see any sliding happening though. Let me show you things that I've done that come close and you tell me what look good.

But do this so it takes up the whole screen
http://www.visibilit...ontent-swap.php

http://www.visibilit...roller-demo.php

http://www.visibilit...els-example.php
or with jquery
http://www.visibilit...g-tabs-demo.php

http://www.visibilit...ry/gallery.html

http://www.visibilit...th2-example.php

http://www.visibilit...allery-demo.php

or the lightbox
http://www.visibilit...ncybox-demo.php

Thats pretty much everything I have that comes close.


  • 0

#8 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 06:29 PM

Google horizontal websites for inspiration. Or jquery horizontal website plugin. Or jquery horizontal slider. I've come across a few.
  • 0

#9 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 07:40 PM

Eric, think I might have found something. It is based on something called supersized, but need to look into it a bit to see if I have the ability to customize it to my needs.

Google horizontal websites for inspiration. Or jquery horizontal website plugin. Or jquery horizontal slider. I've come across a few.


  • 0

#10 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 07:57 PM

Cool. The menu is the easy part. Just AP it. No top/left required. It will automatically go to the top left of the body (view port).
  • 0

#11 yankees

yankees

    New member

  • New Members
  • 6 posts

Posted 09 March 2010 - 08:07 PM

Forgive me for being ignorant. What is AP?

Cool. The menu is the easy part. Just AP it. No top/left required. It will automatically go to the top left of the body (view port).


  • 0

#12 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 09 March 2010 - 08:11 PM

Absolute positioning
  • 0

#13 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 10 March 2010 - 10:42 AM

Here is the basic pure css/html idea. http://www.visibilit...ntent-swap3.php

I havent worked out the bugs in IE6 and Opera yet. First trying to do it on my own. If need be I'll go Googling. Then you just need to add some smooth scroll JS to it.
  • 0

#14 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 10 March 2010 - 06:21 PM

Anybody want to try and fix this in opera? http://www.visibilit...ntent-swap3.php

it's a known opera bug a the way to fix it is to wrap it in a overflow auto with a overflow hidden wrapped around that to hide the scrollbar seen here http://www.visibilit...ntent-swap2.php

problem is on the first link it's the whole body. Giving the body overflow auto instead of hidden (essentially providing the same fix) enables opera to go to link two and three but not back to two or one. Weird? Cool little bug...
  • 0

#15 PicnicTutorials

PicnicTutorials

    PicnicTutorials

  • Advanced Member
  • PipPipPipPip
  • 2,432 posts
  • LocationCarlsbad, CA

Posted 12 March 2010 - 04:04 PM

fixed it! The js I was looking for fixed Opera on it's own. http://www.visibilit...ntent-swap4.php
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users