开发者

On printing webpage , it prints all the images of image slider

I have got a jquery image slider on my webpage , when i try to print that page all the images of that slider are printed , I want to print the current slide image , how can i acheive that , Below is the website : Duxb开发者_如何学运维ury Caravans


It seems your stylesheet isn't being applied on print. I've had the same problem before. Adding an explicit "print" stylesheet fixed it:

<link rel="stylesheet" type="text/css" media="print" href="style.css">

Actually looking at your source, you are specifically saying media="screen", so maybe changing that to media="all" will work too.


Probably because all images are visible on page load. The slider javascript is not executed for the print, so you're actually printing the non-js version of your page.

Show only the first image and hide the rest in CSS. Make them visible using javascript if the slider won't do that for you.

If that won't work either (can't imagine why), include only one image in your HTML, and add the rest in javascript before the image slider is initialized.


Use CSS rules for printing.

Try adding this to your CSS file:

@media print
{
    #slideshow { display: none }
}

Here we added a rule to hide the "slideshow" div. This rule will be applied exclusively for "print" media.


Your problem is bigger than a quick / simple solution can handle.

You have learned an important lesson, which is to consider the print view of the website since the beginning.

Here is an example of how to handle this issue the right way: http://www.sathyasai.org.br/mensagem/ Try seeing a print preview, and look how the website screen view differs from the print view. Both were carefully considered from the start. At the print view,all stuff like background, navigation menus, breadcrumbs, etc., are removed.

It is not a good idea to develop the whole website design without thinking about the print output. QAs you are experiencing, you will have a lot of work to get the print output as you want. You have to "redesign" it to the printer now...

Good luck!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜