Onclick Of Image From Image List Display The Clicked Image In A Main Div

emmi · December 20, 2013, 10:53am

Hi all,

I have achieved multiple file uploads and Preview for all file uploaded images before it is saved to database in yii using jquery.

But I also need a condition 1)required at max 3 and minimun 1 file uploads. I did search but found which matches my requirement 2) want to reuse the code something as foreach for multiple uploads . 3)on click of image (id’s blah1, blah2) display that image in first div – to preview

I did try but found not working.

view




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>


 <script type="text/javascript">

   $(document).ready(function(){

    var preview = $("#blah");

  var preview1 = $("#blah1");

   var preview2 = $("#blah2");


   $("#input").change(function(event){

   var input = $(event.currentTarget);

    var file = input[0].files[0];

    var reader = new FileReader();

     reader.onload = function(e){

   image_base64 = e.target.result;

   preview.attr("src", image_base64);


     };

      reader.readAsDataURL(file);

   });


    $("#imgInput1").change(function(event){

   var input = $(event.currentTarget);

  var file = input[0].files[0];

   var reader = new FileReader();

      reader.onload = function(e){

   image_base64 = e.target.result;

   preview1.attr("src", image_base64);


   };

   reader.readAsDataURL(file);

   });


  $("#imgInput1").click(function(event){

   var input = $(event.currentTarget);

     var file = input[0].files[0];

   var reader = new FileReader();

    reader.onload = function(e){

   image_base64 = e.target.result;

   preview.attr("src", image_base64);


   };

    reader.readAsDataURL(file);

   });


  $("#imgInput2").change(function(event){

    var input = $(event.currentTarget);

    var file = input[0].files[0];

      var reader = new FileReader();

reader.onload = function(e){

   image_base64 = e.target.result;

   preview2.attr("src", image_base64);


};

reader.readAsDataURL(file);

});


 });




</script>


<?php $form=$this->beginWidget('CActiveForm',array(

  'id'=>'edit_form',

'enableAjaxValidation'=>false,

 'htmlOptions'=>array('enctype'=>'multipart/form-data'),

   )); ?>


  <div class="product">

     <div class="imgdiv">

  <img id="blah" class="i1" src="#" width="115px" height="120px"/>

      <img id="blah1" class="i2" src="#" width="50px" height="20px"/>

      <img id="blah2" class="i3" src="#" width="50px" height="20px"/>

    </div>      

    <div class="title4">

     <?php echo $form->labelEx($model,'pimg'); ?>


    <?php echo $form->fileField($model, 'pimg',array('id'=>'imgInput',)); ?>


            <?php echo $form->error($model,'pimg'); ?>

    </div>  


     <div class="title4">

     <?php echo $form->labelEx($model,'pimg'); ?>


    <?php echo $form->fileField($model, 'pimg',array('id'=>'imgInput1',)); ?>


            <?php echo $form->error($model,'pimg'); ?>

    </div>  


     <div class="title4">

     <?php echo $form->labelEx($model,'pimg'); ?>


    <?php echo $form->fileField($model, 'pimg',array('id'=>'imgInput2',)); ?>


            <?php echo $form->error($model,'pimg'); ?>

    </div>  




  </div>


 <?php $this->endWidget(); ?>

Can any one help me to figure out the problem PLEASE HELP! Let me know if any among you know … Thank You

emmi · December 21, 2013, 7:40am

it works

$(’.thumbs img’).click(function() {

var thmb = this;


var src = this.src;


&#036;('.bottlesWrapper img').fadeOut(40,function(){


    thmb.src = this.src;


    &#036;(this).fadeIn(40)[0].src = src;


});

});

</div>

</div>