2013-08-30 3 views
0

У меня есть изображение, которое хранится в моих файлах.Может ли JavaScript задать атрибуты, такие как высота, ширина?

Я хочу просмотреть это изображение в 3 разных размерах. Поэтому я использую тег <img src> и задаю разную высоту & ширину 3 раза.

Он работал отлично, когда я просто повторял его. Теперь я хочу просмотреть это в слайдере, и в нем есть код JavaScript.

Его рабочие штраф за «Thumb образ», потому что он имеет <img src> тег с ним, но маленьким изображением и большое изображение не имеет <img src> тега и я не могу понять, как изменить размер изображения в обоих 'smallimage:' &'largeimage:.

Я мало знаю о JavaScript. Я только что скопировал код JavaScript из другого места.

<link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css"> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $('.jqzoom').jqzoom({ 
      zoomType: 'innerzoom', 
      preloadImages: false, 
      alwaysOn:false 
     }); 
    }); 
</script> 


<table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
    <td align="right" valign="top" ><div class="clearfix" style="margin-left:-30px;"> 
     <a href="images/imgProd2/bracelets_Diamond.png" class="jqzoom" rel='gal1' title="triumph" >   
      <img src='<?php echo $single_image_query_fetch['images']; ?>' height='261' width='325' 
       title='triumph' style='border: 4px solid #666;'>    
     </a> 
     </div> 
     <br/> 

     <!-------------------------------- Images Part is strating from here -------------------------> 

     <div class="clearfix" style="margin-left:-30px; margin-top:-10px;" > 
      <ul id="thumblist" class="clearfix" > 

       $image_query = "select * from product_images where product_id=$id"; 
       $image_query_run = mysql_query($image_query); 
       while($image_query_fetch = mysql_fetch_array($image_query_run)) { 

        //Thumb     
        $thumb_image = 
         "<img src=http://localhost/cms/". 
           $image_query_fetch['images'] ." height='80' width='100' alt=\"\" />"; 


        //large 
        $big_image = "<img src=http://localhost/cms/". 
          $image_query_fetch['images'] ." height='1024' width='1280' alt=\""/>"; 
          $image_fetch[1]= $big_image; 

        //small         
        $small_image = "<img src=http://localhost/cms/". 
            $image_query_fetch['images'] ." height='261' width='325' alt=\"\" />"; 
       <li> 
       <a href='javascript:void(0);' rel="{gallery: 'gal1', 
                 smallimage: 'images/imgProd2/Bracelet_Silver.png', 
                 largeimage: 'images/imgProd2/bracelets_Diamond.png'}"> 
         <img src='<?php echo $image_fetch[0]; ?>' height='80' width='100' > 
        </a> 
      </li> 
} 

В <li> я хочу, чтобы определить размеры для smallimage и largeimage. Пожалуйста, скажите мне, как это сделать.

+1

Таким образом, вы скопировали JS из s в другом месте, и теперь вы хотите, чтобы SO адаптировала его к вашим потребностям? Научитесь писать свой собственный JS или нанимать кого-то, чтобы сделать это за вас. Это не бесплатный генератор кода. (Ответ на вопрос заголовка _ «Может ли JS устанавливать атрибуты» _: Нет, а не JS, но DOM может, а реализация браузера JS включает API DOM, который предлагает методы, необходимые для этого) –

+0

Если у вас есть только ** один размер изображения на вашем сервере, с CSS или JS вы можете заставить ** браузер ** изменять размер изображения **, но не физически уменьшать его. Используйте некоторую библиотеку изменения размера PHP, которая изменит размер и сохранит на вашем сервере разные размеры изображения. В противном случае вы можете прочитать изображение в Canvas и отправить на сервер разные размеры для хранения. –

ответ

1

Да, вы можете.

Высоту:

$(".smallimage").height(100); 

Для ширины:

$(".smallimage").width(150); 

Изменение 100 и 150 к вашему значению или динамическим ...

Приветствия

+0

Спасибо большое за ответ! Я знаю, это звучит глупо, но не могли бы вы рассказать мне, где добавить эти строки. –

+1

Можете ли вы сказать мне, откуда у вас исходный код? Если так, возможно, я смогу проверить это и дать правильный ответ. Возможно, сам плагин имеет некоторые настройки, которые вы можете настроить. –

+0

Я загрузил код запроса j отсюда http://www.mind-projects.it/projects/jqzoom/archives/jqzoom_ev-2.3.zip –

1
$("smallimage").css('height', 'num_here'); 
$("smallimage").css('width', 'num_here'); 

$("largeimage").css('height', 'num_here'); 
$("largeimage").css('width', 'num_here'); 

Я не знаю, является ли largeimage и SmallImage или классы или идентификаторы, так что вы должны будете указать, что сами если вы знаете, как сделать это ... потому, что высота и ширина собственности приведены в документации Jquery , Не только это, но этот вопрос, должно быть, спросил здесь более 100 раз.

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