I need to create a webpage with images at bottom of the page of 50 px height and the top of the page will be blog/text.
Users should be able to scroll the images left or right at bottom and when they click on the photos it would zoom into the photo from the blog.
The photos will load as the user scrolls left and right at bottom div.
Example :
https://www.google.com/maps/place/Yosemite+National+Park/#37.74145,-119.59168,3a,75y,90t/data=!3m8!1e2!3m6!1s15587532!2e1!3e10!6s%2F%2Fstorage.googleapis.com%2Fstatic.panoramio.com%2Fphotos%2Fsmall%2F15587532.jpg!7i1536!8i2048!4m2!3m1!1s0x8096f09df58aecc5:0x2d249c2ced8003fe!6m1!1e1
if you post code then we can help better, but if you haven't written any yet then it's worth checking out something like the following link (there's a plethora out there)
The zoom you're talking about is normally referred to as lightbox (darken or lightened background behind the image)
lightbox example
You also seem to be describing 2 things:
- a horizontal gallery display in the footer
- an image clicked from within a blog
if you've built a blog then you should check out the associated docs (assuming you've utilised something like Wordpress) as they'll likely already have a solution or plugin available.
Related
This image contains the code I am using but it doesn't behave correctly. like in websites we see as we scroll down images or anything were not present and then comes from the right. like if we go to end of the page a contact form should appear from right. this is what i am trying to achieve
So I'm trying to build a site where the "title page" is basically one big image that takes up the entire screen, and if you scroll down you get to the content beneath it.
My code so far is:
What I'm trying to do is to put two GIFs on the bottom left and right corners of my image, and of which can be clicked to navigate to another page of the site. I'm unsure though of how to put them onto the larger image and how to position them.
Edit: the HTML code I put in my post is not showing to me?
I'm using pointer-events:none; on the main photograph at the top of my site http://www.onedirection.net/, to allow the user to select the navigation behind the image.
However, I'd like to let the user click on each member of the band to go to a separate page, but ONLY for the parts of the image that don't overlap into the navigation.
I'm a bit stuck with this. Can it be done? I was thinking of using an image map, but can't get it working without the navigation becoming "less clickable".
I'm using a template named as GoGreen (By Templateism) on blogger. I've edited its color and other things.
The problem I am facing is, that when I make a post on it, and place a image (for example I choose an image which is not very big) at the top of the page.
It looks good, but the same image on main page becomes big and blurry. I try to fix but failed.
Summary:
I'd like to display a shopping cart from another domain underneath my fixed content in my page - and have the scrollbars come out properly.
Details:
I need to display a shopping cart from a vendor within a page on "my" site with "my" header on top. (Eventually the shopping will all be in a subdomain but not now, sigh.) The header is a fixed height. The shopping cart pages vary in height as you navigate within that frame.
I've tried frames and iframes and had cross-browser issues with the iframes. I'm only testing four configurations, Windows/IE, Windows/Firefox, Mac/Safari and Mac/Firefox.
Right now I am using a frameset with two frames, one containing my fixed-height header page, the other containing the external page. This does work - the one issue is that when a scrollbar appears it (of course) only appears on the bottom frame.
This will do and the client isn't very sophisticated but it bugs me.
If I use IFRAMES, I find I need to sprinkle height: 100% and overflow-y: auto in various places - and yet I still cannot avoid either one of two unacceptable issues that appear in at least one of the browser/OS combinations...
The combined content is larger than the window, but no scrollbar appears.
An inner scrollbar and an outer scrollbar both appear.
Any hints appreciated!
EDIT:
Thanks for the work - but I don't think I conveyed the issue correctly.
I'm not using frames for layout - I wish simply to make a page framing something on another site (that hosts the shopping cart and whose URL should not be exposed).
Frames "work" - BUT having an interior scrollbar on the second frame and no scrollbar on the whole page is definitely wrong behavior. My client won't know this but it'll look amateurish to people seeing the page.
I don't see quite how a server-side include or CSS would do it and I know both fairly well. If I used the server side include, how would links internal to the shopping cart work? I'd leave my site, correct?
Summary: A shopping cart hosted on another site, embedded on my content page.
Don't use frames, if the user does command + click then the product will open in new window and your frame will disappear.
One feasible solution I see here is with Javascript:
Load the page via $.ajax
redirect all clicks so that it loads in ajax window by
$('iframe a').on('click',function(){
// load the product via AJAX
});
make sure height of Div is not fixed so that it expands automatically and scrollbars are there only on window.
This is best way I could think of keeping the integration seamless while hiding the url