Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Image Selector

  1. #1
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Selector

    Hello everyone,

    I am trying to find a javascript that will allow the user to see about 4 - 5 small thumbnail images at the top of the page. When they select one it will change the background of the banner to whatever that image is whether it be leaves, snow, trees, different color but keep the logo. Can anyone help me out with this, or point me in the right direction? Thank you for your help!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Set things up something like so with your banner:

    HTML Code:
    <div id="banner_bg"><img src="logo.gif"></div>
    Then you can just do this with any existing pair of thumbnail and background images and place it anywhere on your page that you like:

    HTML Code:
    <img src="thumb1.jpg" alt="Background Thumnail" title="whatever"
    onclick="document.getElementById('banner_bg').style.backgroundImage='url(bg1.jpg)';">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hmm this is going to be a little tricky, since I am using Joomla CMS for this.


    Code:
    <a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
    			          			
                                    <div id="top">

    that is the code for where the "banner" is. The css contains all of the information for the banner in the #logo and #top id's.

    Code:
    #logo {
    	position: absolute;
    	top: 35px;
    	left: 25px;
    	display: block;
    	width:350px;
    	height: 66px;
    	background: url(../images/logo.png) no-repeat;
    }
    
    #top {
    	height: 60px;
    	padding-top: 35px;
    	overflow: hidden;
    	margin-left: 395px;
    	margin-bottom: 10px;
    	margin-right: 25px;
    	color: #999;
    }

    The code provided in your response didn't quite show up in the Joomla Template. Any ideas? Thanks again!

  4. #4
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I was wondering the same thing. Thanks for the coding.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You would just need to make a container for it:

    HTML Code:
    <div id="banner_bg">
    <a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
    </div>
    Set the style for banner_bg to include height and width greater than for logo, transfer its positioning to the container, and center it in the container:

    Code:
    	#banner_bg {
    	position: absolute;
    	top: 35px;
    	left: 25px;
    	width:370px;
    	height: 86px;
    }
    
    	#logo {
    	margin:10px auto;
    	display: block;
    	width:350px;
    	height: 66px;
    	background: url(../images/logo.png) no-repeat;
    }
    Some other adjustments in markup and/or more likely style may still need to be made. But this has nothing to do with the scripting of the background changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Ok, I have it working to an extent. How do you get the image bg to stay? After I click on the image that I want as the bg, it goes back to the original when I go to another page or refresh. I want to set it up to stay at what they chose, and one of the choices will be to make it the default again. I appreciate your help!!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    With Joomla, or any CMS, even simply with a PHP supporting host, you can set a server side cookie in the user's profile. I won't go into that, as it isn't my area of expertise, but it would probably be the best method.

    Using javascript, you can add these quirksmode.org cookie functions to the page (in the head in either a script bock or as an external script):

    Code:
    function createCookie(name,value,days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "; expires="+date.toGMTString();
    	}
    	else var expires = "";
    	document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
    	var nameEQ = name + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0;i < ca.length;i++) {
    		var c = ca[i];
    		while (c.charAt(0)==' ') c = c.substring(1,c.length);
    		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    	}
    	return null;
    }
    
    function eraseCookie(name) {
    	createCookie(name,"",-1);
    }
    Then when you set the bg, also set the cookie:

    HTML Code:
    <img src="thumb1.jpg" alt="Background Thumnail" title="whatever"
    onclick="document.getElementById('banner_bg').style.backgroundImage='url(bg1.jpg)';
    createCookie('banner_bg','bg1.jpg',50);">
    50 will be the number of days persistence. Then, where you have this markup:

    HTML Code:
    <div id="banner_bg">
    <a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
    </div>
    Add to it:

    HTML Code:
    <div id="banner_bg">
    <a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
    </div>
    <script type="text/javascript">
    ;(function(){
    var bg=readCookie('banner_bg')? readCookie('banner_bg') : 'some.jpg';
    document.getElementById('banner_bg').style.backgroundImage='url('+bg+')';
    })();
    </script>
    some.jpg is the default background image.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    That worked great! Thank you so much for all of your help. The one final problem I am running in to is the image that is selected is appearing about 30px or so higher than it should be (starting) Any ideas? I have messed around with the CSS for quite some time now. If you would like I can provide a screenshot.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    A link to the live page would be better.

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Well, I really cannot supply a Live link. I am developing this on my machine using WAMP. It is being made in to a company intranet, and we are just waiting on the server to come in for it to go on. The best I could do is provide screen shots, and sample of the code.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •