First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/
Related
I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.