CODEWITHSUNDEEP
phpjquery
Ibrahim Mohammed
Ibrahim Mohammed

Reputation: 1

how to call javascript funciton within php

Looking for ideas & suggestions, I'd like to make a very simple slideshow by pulling the images from a file.

The problems are

(1) There are over 550 images I would like to display in sequence, and do not want to code for that many images... the images are simply numbered 1,2,3,...348,...469... and can be pooled in one folder.

(2) We are constantly adding new images to these folders & would like the slideshow to add them automatically as well.
I'm trying to call a javascript function within php. it works php but doesnt excute code java script and here is both scritp php and jquery ..pictures are loaded into website but doesnt show and animate write or left . except first picture . 

<div class="gallwrapper" >
    <div class="gallmask">
        <ul class="gallul">
         <?php if( is_array($images )): ?>
            <?php foreach($images as $key => $value ): ?> 
               <?php if($value !="." && $value !=".."):?>
                <li class="gallli">
                    <img class="gallimg" src ="gallary/<?php echo $value ?>"   />
                </li>
        <?php endif; ?>
            <?php endforeach; ?>
               <?php endif; ?>

        </ul>
    </div>

</div>
     <div class="btnleft" >
   <div class="leftbtn-inner" style =" background-image:url('right.png');background-  size: 35px 80px;background-repeat:no-repeat;" >  

   </div>
</div>
<div class="btnright" >
   <div class="rightbtn-inner"  style =" background-image:url('left.png');background-size: 35px 80px;background-repeat:no-repeat;"> </div>  
</div>

and this is javascript 

 var numImages =0;
 var curentImages=1;
var totalwidth=0;
 $(document).ready ( function(){
 $('.gallli').each(function(){
     numImages++;
     totalwidth += 600;
 });
 $('.gallul').css('width' totalwidth + 'px');
 $('.btnright').click (function() {
     moveRight();

 } );
 $('.btnleft').click (function() {
     moveLeft();

 } );
  });
 moveRight() {
 if( curentImages >1) 
 $('.gallul').animate( {'marginLeft' :'-=600px'} , 1000,'swing');
 curentImages--;

 }
   moveLeft() {
   if( curentImages >1) 
 $('.gallul').animate( {'marginLeft' :'+=600px'} , 1000,'swing');
 curentImages++;
 }

Upvotes: 0

Views: 82

Answers (1)

Dawid Dominiak
Dawid Dominiak

Reputation: 507

There is a possibly way to execute native javascript functions. You have to use this extension. Of course it's only a language without DOM API. I'll not recommend to use it in this case.

http://php.net/manual/en/book.v8js.php.

Upvotes: 1

Related Questions