Do you know any script which can help to achieve effect like on whis website: http://www.julianabicycles.com/
When you clik on any bike, you can see lightbox sizing effect, but most important is that it is fullscreen.
I tryed to achieve look alike effect with colorbox and similar scripts, but i cant find option for width and height 100%.
I also tryed to examine code of that website, but i consider myself newbie in js, so that's why i'm looking for your help.
Thanks in advance!
That site is using swipe.js. https://github.com/bradbirdsall/Swipe
But, colorbox has a width parameter. The 100% will be of the containing div, so make sure that is also 100%. You might want to show what you've tried.
Related
So I have a site I am working on and I want it to load to a full background video with the title over it. However, I also want to the user to beable to scroll to other full screen sections of a page. How do I get this to work.
Here is a Codepen link
http://codepen.io/anon/pen/rskjF
The about div is the next section I want to make. It is supposed to be(well every section is) 100% height and width. It seems from the look of some sites, you can achieve this with clever positioning.
I've used Syd Lawrence's jquery.videoBG with good success. Just use this example to make your hero div have a video background. Then write the rest of your page below that div.
(Bonus tip: If you don't already know about using 'vh' and 'vw' as CSS units you may want to look into them. Example:.row{height: 100vh;})
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I'm building a site that uses a jQuery image gallery. You can see an example here.
For some reason, when the gallery changes images, or when you manually change images, the page height seems to be 'flickering' for want of a better word. It seems as though the page height is being increased by the new image, and then very quickly being reduced back to its original height.
Does anyone have any ideas on what's causing this and how to fix it?
As always, any help is appreciated!
Thanks in advance,
Tom
You may try this google code contain with jquery.lightbox-0.5.css
code.google.com/p/imdametadata/source/browse/trunk/guidelines/documents/web/css/jquery.lightbox-0.5.css
Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
I was looking at this gallery:
http://www.orangegirlphotographs.com/portfolio.cfm?galleryID=4
And just loved the way it looked, anyone have any idea how to get a similar effect using ideally CSS/JS and if not then using flash? Furthermore it would be excellent if you could move to the next slide by clicking on the image itself.
I'm also wondering how she is able to maintain height of the images when resizing (unless she is doing it manually which I doubt now days).
I normally use Gallery3 for my image uploading, automatic resizing with AnotherSlider to get a sliding effect but I would really appreciate it if you guys could direct me to something like this?
jQuery's probably your best bet here. I've used the Cycle plugin with slideshows before: http://jquery.malsup.com/cycle/
Look at the examples and you'll get an idea of what it can do: http://jquery.malsup.com/cycle/more.html?v2.23
For the height, either all the images have the same height, or simply setting it in html will keep the ratio. It's better to have them all the same height and resize them in something like Photoshop as the results will be smoother