1485 sujets

Web Mobile et responsive web design

Bug ouverture image avec lightbox / jquery

bonjour,
j'aurais besoin de votre aide pour fixer ce problème :
quand j'ouvre une image de ma galerie photo avec l'ipad ou l'iphone, elle ne reste pas centré dans l'écran et vas vers le bas de la page, ce qui la rend illisible.

www.bellinda.fr/galerie.html

merci pour vos indices !

voici mes codes :

    
<script type="text/javascript">
 jQuery(document).ready(function($) {
    var lightbox = new Lightbox({ query:".lightbox", config:"configuration/layout1.xml" });
 });
</script>


layou1.xml

<?xml version="1.0" encoding="utf-8"?><Lightbox><configuration><transitionTime>600</transitionTime><from>top</from><fromAmount>100</fromAmount><to>bottom</to><toAmount>100</toAmount><maxWidth>0.8</maxWidth><maxHeight>0.8</maxHeight><returnToInitial>true</returnToInitial><backClose>true</backClose><inImageTime>500</inImageTime><outImageTime>500</outImageTime><infinite>false</infinite><buttonsDisabledAlpha>0.5</buttonsDisabledAlpha><buttonsInactiveAlpha>0</buttonsInactiveAlpha><background_cover><color>#000000</color><color_alpha>0.7</color_alpha><pattern></pattern></background_cover><lightbox_main><color>#ffffff</color><color_alpha>0.2</color_alpha><pattern>none</pattern><round_corners>0</round_corners><padding>0</padding><initial_width>200</initial_width><initial_height>200</initial_height></lightbox_main><preloader><preloader>images/ui_lightbox_1/preloader.gif</preloader><preloader_width>110</preloader_width><preloader_height>52</preloader_height></preloader><lightbox_image_mask><color>#000000</color><color_alpha>1</color_alpha><pattern>none</pattern><round_corners>0</round_corners></lightbox_image_mask><description><!--text--><font_family>Arial</font_family><font_color>#ffffff</font_color><font_size>12</font_size><font_weight>normal</font_weight><text_align>left</text_align><!--background--><background>true</background><color>#000000</color><color_alpha>1</color_alpha><pattern>none</pattern><round_corners>10</round_corners><back_size>fit</back_size><!--positioning--><location>outside</location><position>bottom</position><align>center</align><!--padding--><paddingTopBottom>5</paddingTopBottom><paddingLeftRight>15</paddingLeftRight><!--margins--><top>10</top><bottom>0</bottom><left>0</left><right>0</right></description></configuration><buttons><button><action>close</action><width>27</width><height>26</height><normal>images/ui_lightbox_1/close.png</normal><over>images/ui_lightbox_1/close_over.png</over><vertical_align>top</vertical_align><horizontal_align>right</horizontal_align><top>36</top><left>0</left></button><button><action>next</action><width>27</width><height>26</height><normal>images/ui_lightbox_1/next.png</normal><over>images/ui_lightbox_1/next_over.png</over><vertical_align>bottom</vertical_align><horizontal_align>right</horizontal_align><top>-76</top><left>0</left></button><button><action>previous</action><width>27</width><height>26</height><normal>images/ui_lightbox_1/previous.png</normal><over>images/ui_lightbox_1/previous_over.png</over><vertical_align>bottom</vertical_align><horizontal_align>right</horizontal_align><top>-105</top><left>0</left></button></buttons></Lightbox>

Modifié par bellinda (03 Oct 2013 - 14:35)
bonjour bonjour,
j'aurais besoin de votre aide pour fixer ce problème :
quand j'ouvre une image de ma galerie photo avec l'ipad ou l'iphone, elle ne reste pas centré dans l'écran et vas vers le bas de la page, ce qui la rend illisible.

www.bellinda.fr/galerie.html
merci pour vos indices !

voici mes codes :

    
&lt;script type=&quot;text/javascript&quot;&gt;
 jQuery(document).ready(function($) {
    var lightbox = new Lightbox({ query:&quot;.lightbox&quot;, config:&quot;configuration/layout1.xml&quot; });
 });
&lt;/script&gt;


layou1.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;Lightbox&gt;&lt;configuration&gt;&lt;transitionTime&gt;600&lt;/transitionTime&gt;&lt;from&gt;top&lt;/from&gt;&lt;fromAmount&gt;100&lt;/fromAmount&gt;&lt;to&gt;bottom&lt;/to&gt;&lt;toAmount&gt;100&lt;/toAmount&gt;&lt;maxWidth&gt;0.8&lt;/maxWidth&gt;&lt;maxHeight&gt;0.8&lt;/maxHeight&gt;&lt;returnToInitial&gt;true&lt;/returnToInitial&gt;&lt;backClose&gt;true&lt;/backClose&gt;&lt;inImageTime&gt;500&lt;/inImageTime&gt;&lt;outImageTime&gt;500&lt;/outImageTime&gt;&lt;infinite&gt;false&lt;/infinite&gt;&lt;buttonsDisabledAlpha&gt;0.5&lt;/buttonsDisabledAlpha&gt;&lt;buttonsInactiveAlpha&gt;0&lt;/buttonsInactiveAlpha&gt;&lt;background_cover&gt;&lt;color&gt;#000000&lt;/color&gt;&lt;color_alpha&gt;0.7&lt;/color_alpha&gt;&lt;pattern&gt;&lt;/pattern&gt;&lt;/background_cover&gt;&lt;lightbox_main&gt;&lt;color&gt;#ffffff&lt;/color&gt;&lt;color_alpha&gt;0.2&lt;/color_alpha&gt;&lt;pattern&gt;none&lt;/pattern&gt;&lt;round_corners&gt;0&lt;/round_corners&gt;&lt;padding&gt;0&lt;/padding&gt;&lt;initial_width&gt;200&lt;/initial_width&gt;&lt;initial_height&gt;200&lt;/initial_height&gt;&lt;/lightbox_main&gt;&lt;preloader&gt;&lt;preloader&gt;images/ui_lightbox_1/preloader.gif&lt;/preloader&gt;&lt;preloader_width&gt;110&lt;/preloader_width&gt;&lt;preloader_height&gt;52&lt;/preloader_height&gt;&lt;/preloader&gt;&lt;lightbox_image_mask&gt;&lt;color&gt;#000000&lt;/color&gt;&lt;color_alpha&gt;1&lt;/color_alpha&gt;&lt;pattern&gt;none&lt;/pattern&gt;&lt;round_corners&gt;0&lt;/round_corners&gt;&lt;/lightbox_image_mask&gt;&lt;description&gt;&lt;!--text--&gt;&lt;font_family&gt;Arial&lt;/font_family&gt;&lt;font_color&gt;#ffffff&lt;/font_color&gt;&lt;font_size&gt;12&lt;/font_size&gt;&lt;font_weight&gt;normal&lt;/font_weight&gt;&lt;text_align&gt;left&lt;/text_align&gt;&lt;!--background--&gt;&lt;background&gt;true&lt;/background&gt;&lt;color&gt;#000000&lt;/color&gt;&lt;color_alpha&gt;1&lt;/color_alpha&gt;&lt;pattern&gt;none&lt;/pattern&gt;&lt;round_corners&gt;10&lt;/round_corners&gt;&lt;back_size&gt;fit&lt;/back_size&gt;&lt;!--positioning--&gt;&lt;location&gt;outside&lt;/location&gt;&lt;position&gt;bottom&lt;/position&gt;&lt;align&gt;center&lt;/align&gt;&lt;!--padding--&gt;&lt;paddingTopBottom&gt;5&lt;/paddingTopBottom&gt;&lt;paddingLeftRight&gt;15&lt;/paddingLeftRight&gt;&lt;!--margins--&gt;&lt;top&gt;10&lt;/top&gt;&lt;bottom&gt;0&lt;/bottom&gt;&lt;left&gt;0&lt;/left&gt;&lt;right&gt;0&lt;/right&gt;&lt;/description&gt;&lt;/configuration&gt;&lt;buttons&gt;&lt;button&gt;&lt;action&gt;close&lt;/action&gt;&lt;width&gt;27&lt;/width&gt;&lt;height&gt;26&lt;/height&gt;&lt;normal&gt;images/ui_lightbox_1/close.png&lt;/normal&gt;&lt;over&gt;images/ui_lightbox_1/close_over.png&lt;/over&gt;&lt;vertical_align&gt;top&lt;/vertical_align&gt;&lt;horizontal_align&gt;right&lt;/horizontal_align&gt;&lt;top&gt;36&lt;/top&gt;&lt;left&gt;0&lt;/left&gt;&lt;/button&gt;&lt;button&gt;&lt;action&gt;next&lt;/action&gt;&lt;width&gt;27&lt;/width&gt;&lt;height&gt;26&lt;/height&gt;&lt;normal&gt;images/ui_lightbox_1/next.png&lt;/normal&gt;&lt;over&gt;images/ui_lightbox_1/next_over.png&lt;/over&gt;&lt;vertical_align&gt;bottom&lt;/vertical_align&gt;&lt;horizontal_align&gt;right&lt;/horizontal_align&gt;&lt;top&gt;-76&lt;/top&gt;&lt;left&gt;0&lt;/left&gt;&lt;/button&gt;&lt;button&gt;&lt;action&gt;previous&lt;/action&gt;&lt;width&gt;27&lt;/width&gt;&lt;height&gt;26&lt;/height&gt;&lt;normal&gt;images/ui_lightbox_1/previous.png&lt;/normal&gt;&lt;over&gt;images/ui_lightbox_1/previous_over.png&lt;/over&gt;&lt;vertical_align&gt;bottom&lt;/vertical_align&gt;&lt;horizontal_align&gt;right&lt;/horizontal_align&gt;&lt;top&gt;-105&lt;/top&gt;&lt;left&gt;0&lt;/left&gt;&lt;/button&gt;&lt;/buttons&gt;&lt;/Lightbox&gt;
Sujet clos
Aller à