2016-01-20 2 views
0

Я пытаюсь напечатать все изображения на галерее, вместо текущих Выскакивающих изображений,печать всех изображений в галерее fancybox вместо одного изображения?

пожалуйста, проверьте этот код:


<div class="slick-slide slick-active" data-slick-index="0" aria-hidden="false" style="width: 128px;"> 
    <a style="text-align: center; display:block;" id="fancyLaunch102595156" href="#"> 
     <img src="/en/PublishingImages/156/156.jpg" alt="" style="border-color: #7990C2; width: 125px; height: 90px; border:2px solid #7990C2;-moz-box-shadow: 2px 2px 2px #333333; -webkit-box-shadow: 2px 2px 2px #333333; box-shadow: 2px 2px 2px #333333; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; " class="mCS_img_loaded"> 
     <font color="white"> some title </font> 
    </a> 
    <ul style="margin: 0px; padding: 0px; overflow: hidden; display: none;" id="images102595156"> 
     <li> 
      <a href="/en/PublishingImages/156/newsletter_156_1.jpg" rel="gallery"> 
       <img src="/en/PublishingImages/156/newsletter_156_1.jpg" alt="" style="width: 90px; height: 128px;" class="mCS_img_loaded"> 
      </a> 
     </li> 
     <li> 
      <a href="/en/PublishingImages/156/newsletter_156_2.jpg" rel="gallery"> 
       <img src="/en/PublishingImages/156/newsletter_156_2.jpg" alt="" style="width: 90px; height: 128px;" class="mCS_img_loaded"> 
      </a> 
     </li> 

    </ul> 
</div> 

как показать два изображение для печати.

спасибо и наилучшие пожелания

+0

У вас есть ссылка на страницу этого? –

+0

Да, пожалуйста, проверьте это: http://www.kia.gov.kw/en/MEDIARESOURCES/newsletters/Pages/default.aspx – HAJJAJ

ответ

0

поставил CSS из этого файла в этом медиа-запрос, который уже не в запросе средств массовой информации, на самом деле поставить любой CSS вы делаете, что не важно для печати заглянуть в этот вид медиа-запросов. Надеюсь, я выбрал правильный файл, но вы поняли.

вид-источник: http://www.kia.gov.kw/_catalogs/masterpage/en-us/KIA/fancybox/source/jquery.fancybox.css

@media screen 
{ 
    /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 
.fancybox-wrap, 
.fancybox-skin, 
.fancybox-outer, 
.fancybox-inner, 
.fancybox-image, 
.fancybox-wrap iframe, 
.fancybox-wrap object, 
.fancybox-nav, 
.fancybox-nav span, 
.fancybox-tmp 
{ 
    padding: 0; 
    margin: 0; 
    border: 0; 
    outline: none; 
    vertical-align: top; 
} 

.fancybox-wrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 8020; 
} 

.fancybox-skin { 
    position: relative; 
    background: #f9f9f9; 
    color: #444; 
    text-shadow: none; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

.fancybox-opened { 
    z-index: 8030; 
} 

.fancybox-opened .fancybox-skin { 
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
} 

.fancybox-outer, .fancybox-inner { 
    position: relative; 
} 

.fancybox-inner { 
    overflow: hidden; 
} 

.fancybox-type-iframe .fancybox-inner { 
    -webkit-overflow-scrolling: touch; 
} 

.fancybox-error { 
    color: #444; 
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin: 0; 
    padding: 15px; 
    white-space: nowrap; 
} 

.fancybox-image, .fancybox-iframe { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.fancybox-image { 
    max-width: 100%; 
    max-height: 100%; 
} 

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
    background-image: url('fancybox_sprite.png'); 
} 

#fancybox-loading { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -22px; 
    margin-left: -22px; 
    background-position: 0 -108px; 
    opacity: 0.8; 
    cursor: pointer; 
    z-index: 8060; 
} 

#fancybox-loading div { 
    width: 44px; 
    height: 44px; 
    background: url('fancybox_loading.gif') center center no-repeat; 
} 

.fancybox-close { 
    position: absolute; 
    top: -18px; 
    right: -18px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    z-index: 8040; 
} 

.fancybox-nav { 
    position: absolute; 
    top: 0; 
    width: 40%; 
    height: 100%; 
    cursor: pointer; 
    text-decoration: none; 
    background: transparent url('blank.gif'); /* helps IE */ 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    z-index: 8040; 
} 

.fancybox-prev { 
    left: 0; 
} 

.fancybox-next { 
    right: 0; 
} 

.fancybox-nav span { 
    position: absolute; 
    top: 50%; 
    width: 36px; 
    height: 34px; 
    margin-top: -18px; 
    cursor: pointer; 
    z-index: 8040; 
    visibility: hidden; 
} 

.fancybox-prev span { 
    left: 10px; 
    background-position: 0 -36px; 
} 

.fancybox-next span { 
    right: 10px; 
    background-position: 0 -72px; 
} 

.fancybox-nav:hover span { 
    visibility: visible; 
} 

.fancybox-tmp { 
    position: absolute; 
    top: -99999px; 
    left: -99999px; 
    visibility: hidden; 
    max-width: 99999px; 
    max-height: 99999px; 
    overflow: visible !important; 
} 

/* Overlay helper */ 

.fancybox-lock { 
    overflow: hidden !important; 
    width: auto; 
} 

.fancybox-lock body { 
    overflow: hidden !important; 
} 

.fancybox-lock-test { 
    overflow-y: hidden !important; 
} 

.fancybox-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    display: none; 
    z-index: 8010; 
    background: url('fancybox_overlay.png'); 
} 

.fancybox-overlay-fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
} 

/* Title helper */ 

.fancybox-title { 
    visibility: hidden; 
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    position: relative; 
    text-shadow: none; 
    z-index: 8050; 
} 

.fancybox-opened .fancybox-title { 
    visibility: visible; 
} 

.fancybox-title-float-wrap { 
    position: absolute; 
    bottom: 0; 
    right: 50%; 
    margin-bottom: -35px; 
    z-index: 8050; 
    text-align: center; 
} 

.fancybox-title-float-wrap .child { 
    display: inline-block; 
    margin-right: -100%; 
    padding: 2px 20px; 
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-border-radius: 15px; 
     -moz-border-radius: 15px; 
      border-radius: 15px; 
    text-shadow: 0 1px 2px #222; 
    color: #FFF; 
    font-weight: bold; 
    line-height: 24px; 
    white-space: nowrap; 
} 

.fancybox-title-outside-wrap { 
    position: relative; 
    margin-top: 10px; 
    color: #fff; 
} 

.fancybox-title-inside-wrap { 
    padding-top: 10px; 
} 

.fancybox-title-over-wrap { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    color: #fff; 
    padding: 10px; 
    background: #000; 
    background: rgba(0, 0, 0, .8); 
} 
fancybox-print { 
    position: absolute; 
    right: 15px; 
    bottom: 15px; 
    padding: 5px 10px; 
    color: #333; 
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
    text-decoration: none; 
    background: #fff; 
    background: rgba(255,255,255,.75); 
    z-index: 8050; 
    -moz-opacity: 0.75; 
    opacity: 0.75; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=75); 

} 

.fancybox-print:hover { 
    -moz-opacity: 1; 
    opacity: 1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
} 



} /* end @media screen */ 

/*Retina graphics!*/ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
     only screen and (min--moz-device-pixel-ratio: 1.5), 
     only screen and (min-device-pixel-ratio: 1.5){ 

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
     background-image: url('[email protected]'); 
     background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ 
    } 



#fancybox-loading div { 
     background-image: url('[email protected]'); 
     background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ 
    } 
} 
+0

дорогой У меня есть отдельный файл CSS для печати, но проблема в том, как показать все изображения внутри всплывающего окна, чтобы печатать их все время, а не печатать текущее изображение. – HAJJAJ

Смежные вопросы