Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Photos to load randomly in slider each time page is refreshed or loaded

Posted on 2012-09-10
27
Medium Priority
?
613 Views
Last Modified: 2012-09-10
Please go to:
http://uploads.guestservices.com/GSI-New/index.html

Both items I need this feature to work on is the slider and the testimonials

All of the css and js files are in the site folder - you can pull them up and take a peek

Do I need a php array to make this happen or can the javascript be adjusted?
0
Comment
Question by:RickardP_GSI
  • 19
  • 8
27 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384052
A script like this would shuffle the order of the images each time the page is loaded or refreshed.
<script type="text/javascript">
$(document).ready(function(){
	var images = $(".pro_items li img");
	var imgOrder = new Array();
	var randomOrder = new Array();
	$(images).each(function(i){
		imgOrder[i] = $(this).attr("src");
	});
	randomOrder = imgOrder.sort(shuffle);
	$(images).each(function(i){
		$(this).attr("src", randomOrder[i]);
	});
});
function shuffle(a, b) {
    return (Math.round(Math.random()) - 0.5);
}
</script>

Open in new window

0
 

Author Comment

by:RickardP_GSI
ID: 38384494
tommyboy

This is not working - do i need to do anything further to the script?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384646
You should be able to just plug the script into the head section..

If it helps, here is my complete test page. I just copied the unordered list of images from the site.

How are you adding images to the carousel? Are you typing them in manually or are they loaded dynamically by the slide show? This could be the problem.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var images = $(".pro_items li img");
	var imgOrder = new Array();
	var randomOrder = new Array();
	$(images).each(function(i){
		imgOrder[i] = $(this).attr("src");
	});
	randomOrder = imgOrder.sort(shuffle);
	$(images).each(function(i){
		$(this).attr("src", randomOrder[i]);
	});
});
function shuffle(a, b) {
    return (Math.round(Math.random()) - 0.5);
}
</script>
<title>Untitled Document</title>
</head>

<body>
<ul class="pro_items">
      <li style="display: none;"><img alt="Dining Management Services" src="images/home-slider1.jpg">
        
      </li>
      <li style="display: none;"><img alt="Recreation and National &amp; State Parks" src="images/home-slider2.jpg">
        
      </li>
      <li style="display: none;"><img alt="Resorts/Lodging across America" src="images/home-slider3.jpg">
        
      </li>
      <li style="display: none;"><img alt="Condos" src="images/home-slider4.jpg">
        
      </li>
      <li style="display: none;"><img alt="Guest Services Caters Special Events" src="images/home-slider5.jpg">
        
      </li>
      <li style="display: none;"><img alt="Retail" src="images/home-slider6.jpg">
        
      </li>
      <li style="display: none;"><img alt="" src="images/home-slider7.jpg">
        
      </li>
    </ul>
</body>
</html>

Open in new window

I can tell from Firebug that the script is definitely randomizing the order of the photos.Random order photos
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:RickardP_GSI
ID: 38384691
I put the script in the head section just like you did - I am typing the images in manually

do you think the code that comes after the img src info  has anything to do with it?

        <div class="pro_banner"><span>Retail<br>
          Management</span>
          <p>made in the USA unique crafts by local artisans in Heartwood, VA; authentic American Indian arts and crafts in Washington, DC along with memorable souvenirs, and let's not forget our resort gift shops</p>
          <a href="retail.html" class="pro_btn">Read More</a></div></li>
0
 

Author Comment

by:RickardP_GSI
ID: 38384693
I wish I could give you 1000 points for this - it's making me pull my hair out LOL
0
 

Author Comment

by:RickardP_GSI
ID: 38384738
I just took your code and tried it in IE9 and Firefox and it's not working properly
hmmmmm
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384780
Are you saying that you ran my test page in FF and IE9 and it does not work? That would be odd since I am using FF.
0
 

Author Comment

by:RickardP_GSI
ID: 38384801
that is correct

here is the page I input your code:
http://uploads.guestservices.com/GSI-New/indexTEST2.html
0
 

Author Comment

by:RickardP_GSI
ID: 38384812
this may be a little easier to read:
http://uploads.guestservices.com/GSI-New/indexTEST3.html
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384840
That is easier to read (except the slide show does not work), thanks.

Try putting my script at the top of all your script includes so it randomizes the order of the photos BEFORE any slidshow scripts build an array out of that list of images.
0
 

Author Comment

by:RickardP_GSI
ID: 38384903
We're getting closer...  it shows the first image (home-slider1.jpg) initially and then when I reload it shows the image holder just no images.  That's in IE.  In FF it does nothing

http://uploads.guestservices.com/GSI-New/indexTEST3.html
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384940
Actually, put my script after jquery-1.7.1.min.js and before script.js.

I just tested that theory and it works.
0
 

Author Comment

by:RickardP_GSI
ID: 38384955
AWESOME - it works great in FF - but not in IE - surprised? :-)
0
 

Author Comment

by:RickardP_GSI
ID: 38384960
When I close out IE and go back in and go to the test page - it does change the image - however when I hit 'refresh' is when it doesn't want to display any image at all
0
 

Author Comment

by:RickardP_GSI
ID: 38384978
Ok - I put the code into my page and it works in both IE and FF
just one teeny weeny little problem

the little black box that sits on each photo - does not rotate along with the respective photo

        <div class="pro_banner"><span>Dining <br>
          Services</span>

http://uploads.guestservices.com/GSI-New/index.html
0
 

Author Comment

by:RickardP_GSI
ID: 38384985
and there are links on a 'read more' for each list photo as well
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38385005
I see the problem. Where is the information for those banners coming from and how are they currently synchronized up with the photos? Looking at the source, I cannot figure it out.
0
 

Author Comment

by:RickardP_GSI
ID: 38385012
I'm now thinking that I can put the info directly onto the photo itself and just remove that div pro_banner

However, I do need my links to work when you click on the photo - Let me remove some code and see if the links will work - standby please
0
 

Author Comment

by:RickardP_GSI
ID: 38385034
that's not going to work
0
 

Author Comment

by:RickardP_GSI
ID: 38385038
this is where the info comes from and how it is synchronized with the photos (div class pro_banner) - when the div and link are within the li tags they stay together with the photo:

      <li><img src="images/home-slider1.jpg" alt="Dining Management Services" />
        <div class="pro_banner"><span>Dining <br>
          Services</span>
          <p>our innovative line of menus has proven to deliver increased value, enhanced speed of service, and maximized customer patronage </p>
          <a href="dining.html" class="pro_btn">Read More</a></div>
      </li>
0
 

Author Comment

by:RickardP_GSI
ID: 38385040
this is in the script.js file:

      $('.pro_slider')._TMS({
            show:0,
            pauseOnHover:true,
            prevBu:'.pro_prev',
            nextBu:'.pro_next',
            playBu:'.pro_play',
            items:'.pro_items>li',
            duration:1000,
            preset:'simpleFade',
            bannerCl:'pro_banner',
            numStatusCl:'pro_numStatus',
            pauseCl:'pro_paused',
            pagination:true,
            paginationCl:'pro_pagination',
            pagNums:false,
            slideshow:7000,
            numStatus:true,
            banners:'fade',// fromLeft, fromRight, fromTop, fromBottom
            waitBannerAnimation:false,
            progressBar:'<div class="pro_progbar"></div>'})
0
 

Author Comment

by:RickardP_GSI
ID: 38385042
the style sheet it uses is pro_pages_style.css
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 38385119
Wow. The answer was simple once I got the full picture of how this slider works.

Here's the new script.
$(document).ready(function(){
	var listItems = $(".pro_items li");
	var liOrder = new Array();
	var randomOrder = new Array();
	$(listItems).each(function(i){
		liOrder[i] = $(this).html();
	});
	randomOrder = liOrder.sort(shuffle);
	$(listItems).each(function(i){
		$(this).html(randomOrder[i]);
	});
});
function shuffle(a, b) {
    return (Math.round(Math.random()) - 0.5);
}

Open in new window

0
 

Author Comment

by:RickardP_GSI
ID: 38385146
You ARE the man!!!!  It works everywhere - whoooot whooooot!!!

Yeah - that whole site has tons of pieces to it and you can easily get lost in the code that goes with it

I thank you sooooooooooo much for your help -
0
 

Author Closing Comment

by:RickardP_GSI
ID: 38385149
tommyboy worked and worked until he got it right - amazing customer service and knowledge
0
 

Author Comment

by:RickardP_GSI
ID: 38385151
ahhhhhhhhhh I see what you did - you are right - that was easy to fix - duh (on my part) but i was becoming cross-eyed - thanks again for your amazing help!!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38385186
You're very welcome. Thanks for the points.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question