WordPress.org

1. pulledin
   Member
   Posted 2 years ago #
   

   I am in a situation where I need to be able to change 4 Background Images using CUSTOM FIELDS that have been put in the CSS.

   I'm not sure if this is possible, but I imagine it's something many people are going to be looking for, and after many searches (and attempts), I could not find a suitable answer in existence, hence the forum post.

   /*------
     IMAGES
     ------*/
   #images {
   	display: block;
   	height: 0px;
   	width: 0px;
   	z-index: 1;
   	}
   #images div {
   	background-attachment: fixed;
   	height: 0px;
   	width: 0px;
   	}
   #images #bg_1 {
   	background-image: url(/images/bg/1-2.jpg);
   	background-position: 50% 10%;
   	}
   #images #bg_2 {
   	background-image: url(/images/bg/2-2.jpg);
   	background-position: 50% 0%;
   	}
   #images #bg_3 {
   	background-image: url(/images/bg/3.jpg);
   	background-position: center;
   	}
   #images #bg_4 {
   	background-image: url(/images/bg/4.jpg);
   	background-position: 50% 70%;
   	}

   I'm calling 2 Jquery scripts in the header ..... (which are not the problem)
   

   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.localscroll.js"></script>

   That allow sliding/navigating from one area of the page to another, and site/page functionality relies on the being able to change the BG images to be POST specific.

   Using the LOCAL SCROLL script and the SCROLL TO script in the HEADER.PHP....

   <script type="text/javascript">
   //<![CDATA[
   
       $(document).ready(function(){
                   jQuery.event.add(window, "load", resizeFrame);
                   jQuery.event.add(window, "resize", resizeFrame);
   
                   function resizeFrame()
                   {
                           var h = $(window).height();
                           var w = $(window).width();
                           var z = $("#tci").height();
                           var x = $("#listing").height();
                           var y = $("#peter").height();
   
                           if (h < 700) {
                                   $("#bg_1").css("height", 800);
                                   $("#bg_2").css("height", 864);
                                   $("#bg_3").css("height", 900);
                                   $("#bg_4").css("height", 800);
   
                                   $("#a").css("margin-top", 800 - z - 64);
                                   $("#b").css("margin-top", (((1600) - x) - y) + 27);
                           }
                           else {
                                   $("#bg_1").css("height", h);
                                   $("#bg_2").css("height", h + 64);
                                   $("#bg_3").css("height", h + 100);
                                   $("#bg_4").css("height", h);
   
                                   $("#a").css("margin-top", h - z - 64);
                                   $("#b").css("margin-top", (((h + h) - x) - y) + 27);
                           }
   
                           if (w < 1096) {
                                   $(".bg_block").css("width", 1096);
                           }
                           else {
                                   $(".bg_block").css("width", w);
                           }
   
                                   $(".bg_block").css("background-position");
   
                   }
       });
     //]]>
     </script>
     <script type="text/javascript">
   //<![CDATA[
   
       $(document).ready(function(){
   
                           $.localScroll({
                              axis:'y',
                              queue:true //one axis at a time
                           });
   
       });
     //]]>
     </script>
     <script type="text/javascript">
   //<![CDATA[
   
           // uses jquery fade
           function killIt(item){
                   $('#'+item).fadeOut(1000);
           }
     //]]>
     </script>
     <!--END OLD 99999999->
   
   </head>
   <body>
   
   <div id="images">
       <div class="bg_block" id="bg_1"></div>
   
       <div class="bg_block" id="bg_2"></div>
   
       <div class="bg_block" id="bg_3"></div>
   
       <div class="bg_block" id="bg_4"></div>
     </div>

   I call the functionality in.....

   Then in my SINGLE.PHP ....

   <?php get_header(); ?>
   
   <div id="content">
   
   <div id="images">
       <div class="bg_block" id="bg_1"></div>
   
       <div class="bg_block" id="bg_2"></div>
   
       <div class="bg_block" id="bg_3"></div>
   
       <div class="bg_block" id="bg_4"></div>
     </div>

   I'm lost ... Any suggestions would be greatly appreciated.... I'm pretty sure I'm using too much code... Thank You.

Topic Closed

This topic has been closed to new replies.