Rotating header graphics with PHP

[showman13]

I have been searching for the past several hours to find a way to rotate through 4-5 different graphics in the header of a web page that I am creating, but have had very little useful help.

There seems to be countless jquery slider scripts out there, but even after downloading a couple of them and attempting to decipher what is to be done with them, I'm no closer to finding the solution then I was at 8 this morning.

Is there any way in PHP to accomplish this? It doesn't have to be fancy, just be able to rotate through a number of slides basically.

Any feedback would be appreciated, even if it is that jquery is the only way to go along with some direction in how to make it work.

Thanks in advance.

Douglas

[AARTI SHRIVAS]

you need jquery for this download jquery library file just call that file in your php file if you try some image slider and download them then you got some jquery files add all that files in your php file just like we add html in php file and then you also have a short function that you have to apply in a script tag for example

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
    $(".footer1").click(function() {

        $(".ul1").toggle();

    });
});
</script>

this is just example i hope you understand what you have to done. search for appropriate image slider on google.

A rotator in php won't work as php just creates static html - no browser interactivity. For that you need javascript. Remember php works on the server, javascript on the client. JS can all php scripts via ajax though, but that seems like more hassle than it's worth seeing as it can be done in just JS.

[EvolutionFallen]

It's important to understand @diafol's point above -- if you want to dynamically alter things on a page without reloading, aside from CSS hover effects, you generally need to use JavaScript.

As to the task at hand, if you can give us the name and URL to a slider/rotator script you fancy, then give us your current code for your site (or even just the part you want the rotator on), it will be easier to point you in the right direction.

EF's post just reminded me (mention of CSS hover effects) - a CSS-only solution here:

http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

And the demo here:

http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

[showman13]

Thank you for your responses.

I looked at what diafol sent, and by the looks of it, that may be suitable for my purposes.
Just need to study the implementation of it to find out for sure.

Here is a website with the basic effect that I am going after
http://www.safesteptub.com/

I don't have my website up yet, so can't show you where it will be used.
I sort of got sidetracked trying to determine how to make this work since it was requested, and I didn't have a clue.

Thanks again for your feedback, and anything else that you think of would be greatly appreciated.

Douglas

I think that site uses bxSlider: http://bxslider.com/

[showman13]

Thanks again diafol.

LOL, they make it look so easy to implement the slider, but I have never (EVER) found anything about jQuery that simple to make it work.

I'll let you know how it goes as I test it out...

Don't know which looks more confusing, the jQuery or the CSS...

Douglas

JS is simple compared to the CSS.

The documentation on the first page of the bxSlider site looks pretty straightforward. With what are you finding difficulty?

[showman13]

I haven't started on that one yet... maybe it is precise enough that even I can understand it.

What I found difficult was the last dozen times I'm attempted to utilize a jQuery script. I think I have gotten a total of 2 of them functioning and given up on the rest.

I will focus on that in the AM and hopefully have it behind me by noon.

Thanks again
Douglas

[EvolutionFallen]

Make sure your HTML structure matches what the plugin requires. A missing or wrong div/class/id somewhere can make the whole thing not work.
For most plugins you shouldn't need to do much with the JS aside from using a selector to grab the right HTML element, and run the script function on it. Ex.:

$(function() {
    $('#sliderContainer').sliderName();
});

[showman13]

OK, I put together a little test script and put in all the info as directed on the bxslider installation instructions.

This will show you how inept I am with jQuery...

All it does is displays the 4 pictures one over the other on the page and then the call to the function is listed below them instead of causing it to create the slider...

http://healthcraftwalkintubs.com/test_rotate.php

Here is the Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Slider Test</title>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/js/jquery.bxslider.css" rel="stylesheet" />

</head>

<body>
<h1>This should display pictures in a slider</h1>

<ul class="bxslider">
  <li><img src="images/gal_7.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_2.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_11.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_17.jpg" width="300" height="300" /></li>
</ul>

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

</body>

</html>

Any feedback or direction would be appreciated.

Douglas

[showman13]

I'm sure that the issue is that the function call doesn't belong where it is, but I don't know where to put it or how the call is made.

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

should be in script tags at the end of the head area.

<head>
  <title>Slider Test</title>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/js/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>

Either that or put it just as a raw function call before the close body tag:

<ul class="bxslider">
  <li><img src="images/gal_7.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_2.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_11.jpg" width="300" height="300" /></li>
  <li><img src="images/gal_17.jpg" width="300" height="300" /></li>
</ul>
<script type="text/javascript">
  $('.bxslider').bxSlider();
</script>
</body>

[showman13]

Thank you again diafol...

putting it in the head section is what it needed.

Now that I have the basics working I need to delve into dressing it up and making it presentable

http://healthcraftwalkintubs.com/test_rotate.php

I appreciate your response and direction.

If you happen to have more in depth knowledge of this plugin that could help, any pointers would be more than welcome to help reduce the timeframe.

Thanks again,
Douglas

Never used it, but once you get your head around plugins, they're pretty much all the same with regard to setup:

If for example the plugin is called diafol:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="/js/jquery.diafol.min.js"></script>

<link href="/css/diafol.css" ...(other props)... />

<script type="text/javascript">
    $(document).ready(function(){
      $('.diafol').diafol();
    });
</script>
</head>
<body>
    <div class="diafol"></div>
</body>

Personally, I like to shove it all at the bottom:

<head>
<link href="/css/diafol.css" ...(other props)... />
</head>
<body>
<div class="diafol"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/js/jquery.diafol.min.js"></script>
<script type="text/javascript">
   $('.diafol').diafol();
</script>
</body>

[showman13]

If I want to change some of the functionality of the plugin, I'm assuming that I need to make the changes in the jquery.bxslider.js file, but changing what I think is necessary based on their documentation, to make it auto start, etc. doesn't seem to have any effect at all.

Am I missing something, or do you just make the changes in that script and upload it, and it should take effect?

[showman13]

If you go to http://bxslider.com/

then click on options, it gives a list of the options to change.

Not being familiar with .js I am guessing at what to change, but nothing seems to change no matter what I do, so I'm thinking that I'm not doing something right.

DO not change the js file. Change settings in your js script

$('.bxslider').bxSlider({...});

Usually options go here (...), e.g.

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});

See the examples page: http://bxslider.com/examples

[showman13]

I guess making changes in the correct place is a good idea... LOL

I did make a few changes, and actually got to see a couple of them work, which was the mode, which I changed to fade and removing the control arrows.

But there are others (namely auto start) that I changed but don't seem to take effect...
Here is what I added:

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    controls: false,
    autoStart: true,
    pause: '1000'
  });
});
</script>

Basically, what I'm trying to accomplish is to have the pics auto start as a slide show, with no right and left control arrows.
Then to be able to make some of the pics actually a video link with the play arrow in the middle of them, and for the slide show to pause if you hover over the picture.

I need to center them between a link menu on the left side and a form on the right, and this will become basically the header on the page.

Sounds simple enough... LOL

feedback and points are always welcome.

Douglas

I think it's auto not autoStart

And for links off the image:

<ul class="bxslider">
  <li><a href="http://www.google.com"><img src="/img/img1.jpg" /></a></li>
  <li><img src="/img/img2.jpg" /></li>
  <li><img src="/img/img3.jpg" /></li>
</ul>

//EDIT

perhaps I was wrong about the autoStart

//EDIT again

no I think I'm right

For a popup video box you could use Fancybox or Colorbox plugins (just examples)

[showman13]

Yep... that was it.

Actually there are both an 'auto' and an 'autoStart' but I didn't notice the 'auto'

auto
Slides will automatically transition

autoStart
Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked

Thanks again... getting closer to where I need to be, one step at a time.

Douglas

[showman13]

video
default: false
options: boolean (true / false)

If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
See http://fitvidsjs.com/ for more info

All I need to do is figure out how to include the fitvids plugin and that should resolve the video issue

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/bx/jquery.bxslider.min.js"></script>
<script src="/bx/plugins/fitvids.js"></script>

/bx/ is my local folder for bxSlider

[showman13]

diafol,

don't know if you are around today, but if you are and have a minute, this has evolved into a lesson in div tags to replace tables. At least that is what I thought would eliminate the issue I was experiencing with the placement of the rotating pictures.

What I was getting was a large white space above and to the left of the picture, and it was pushed out of the space (table cell) that was supposed to contain it when it was displayed.
http://aim2survive.com/test_rotate.php

So, I did a little research and studying on using div tags to replace the use of tables for layout, and while I haven't gotten that perfected just yet, I still have the exact same issue with the display of the pictures.

http://aim2survive.com/test_rotate2.php

Do you OR ANYONE ELSE have any ideas on how to fix it so that doesn't appear like that?

Then also, you seemed to have some knowledge in the div tag usage... I'm continuing to study and play with that, but if you have any suggestions on getting the overall container (960 wide) centered in the middle of the monitor, that would certainly help a lot.

It seems that the size of the whitespace around the pics in the rotator is overrunning the limitations of the div that it is to be contained in...

I don't know if I'm gaining clarity or just getting more confused.

thanks in advance for your help
Douglas

Ok, this seems to be a separate issue and may be better suited to a new thread. And this has now moved out of the realm of php and into js (or possibly css).
Afficionados in those fields may be best placed to help you, despite the expertise of a number of regulars on this forum.

So my advice would be to mark this as solved and open a new thread in the js forum (or even css).
There seems to be a 40px left padding that's coming from somewhere. I couldn't track it down to the css files nor any stylings. That's not to say it's not there though.

[showman13]

Thanks for the response... I was actually thinking that starting a new thread would be a good idea as well, although I hadn't thought about changing forums...

But as for the rotating header graphics, I definitely have them.