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

Thread: Image Bubbles effect personalize

  1. #1
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default Image Bubbles effect personalize

    I was impressed from this tutorial - http://www.dynamicdrive.com/dynamici...agebubbles.htm , and would like to use in my site. But I met difficulties.
    You can see - http://souhssz.webnode.com/tjestova/brojach/ - that I can't remove li , align icons to the center, and chose exact size before and after bubbled.
    Can you help me with css, please

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <link href="http://files.probi.webnode.com/200000143-67c2a681bd/imgbubbles.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    
    /*CSS for 2 demos on the page*/
    #orbs li{
    width: 100px; /*width of image container. Should be wider than contained images (before bubbling) */
    height:100px; /*height of image container. Should be taller than contained images (before bubbling) */
    }
    
    #orbs li img{
    width: 55px; /*width of each image before bubbling*/
    height: 55px; /*height of each image*/
    }
    
    #squares li{
    width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
    height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
    }
    
    #squares li img{
    width: 31px; /*width of each image before bubbling*/
    height: 31px; /*height of each image*/
    }
    
    </style>
    
    <script type="text/javascript" src="http://files.probi.webnode.com/200000142-19a211a9be/imgbubbles.js">
    
    /***********************************************
    * Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    	$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
    	$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
    })
    
    </script>
    
    
    
    <ul id="orbs" class="bubblewrap">
        <li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh6.ggpht.com/_tFIGAJdkWQ8/TLtkBrMQOgI/AAAAAAAAAYs/iZcya-1qa5Q/Firefox-100%D1%85100.png" alt="Bookmark" /></a></li>
        <li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh5.ggpht.com/_tFIGAJdkWQ8/TLtkCrgfkVI/AAAAAAAAAY0/L0Lg7CgHK-Y/Opera-100%D1%85100.png" alt="Add to ..." /></a></li>
        <li><a onclick="javascript:window.external.AddFavorite('http://souhssz.webnode.com/','СОУ Христо Смирненски');return false" rel="sidebar" name="Добавете сайта в Любими " title="СОУ Христо Смирненски" href="http://souhssz.webnode.com/"><img src="http://lh5.ggpht.com/_tFIGAJdkWQ8/TLtkCEPRlBI/AAAAAAAAAYw/1M_6SyAqigM/IE-100%D1%85100.png" alt="Add to ..." /></a></li>
    </ul>

  2. #2
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    18
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    I just took a look at your website. Found at that your primary stylesheet "style.css" is overwriting the bullet list (ul and li) used in image bubbles. So you have too specify either the bubbles sheet or your primary sheet to only apply to the element you want bulleted. Or delete the following code in the primary sheet (line 60) and replace it with:

    Code:
    background: url("../img/li.png") no-repeat left 7px;
    list-style-image: url(../img/li.png);
    Not entirely sure, but I think that should work.

    Or you could also set the background color in the "imagbubbles.css" sheet to be transparent:
    Code:
    .bubblewrap{
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    .bubblewrap li{
    background: transparent;
    display:inline-block;
    zoom:1; /*Trigger haslayout in IE7 and less*/
    *display:inline; /*For IE7 and less*/
    position:relative;
    width: 65px;
    height:60px;
    }
    
    .bubblewrap li img{
    position:absolute;
    width: 55px; /*default width of each image.*/
    height: 60px; /*default height of each image.*/
    left:0;
    top:0;
    border:0;
    }
    
    .bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
    position:absolute;
    font:bold 12px Arial;
    padding:2px;
    width:100px;
    text-align:center;
    background:white;
    }
    Regards Toby
    Last edited by CChawps; 07-24-2011 at 09:33 PM.

  3. The Following User Says Thank You to CChawps For This Useful Post:

    balki (07-24-2011)

  4. #3
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Thanks, Toby (:
    Transparent option was exelent decision.
    Now I need to make pictures closer, with center alignment.
    Have a nice day (:
    Last edited by balki; 07-24-2011 at 08:30 AM.

  5. #4
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Idea how to centralize the pictures?

  6. #5
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    18
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    First thing I'd try would be to wrap a <div> tag around the HTML code for the imagebubble content, with the CSS to centralize. Add an id too the div.

    Example:

    HTML Code:
    <style type="text/css">
    #wrap {
    margin: 0 auto;
    }
    </style>
    
    <div id="wrap">
    <-- YOUR IMAGE BUBBLE CODE HERE -->
    </div>
    If that don't work try adding a fixed width for the #wrap, with the width similar too the width of your content area (let's say it's 800px, for the example):

    HTML Code:
    <style type="text/css">
    #wrap {
    margin: 0 auto;
    width: 800px;
    }
    </style>
    In case this don't work then try using a table placed inside your content area with a width of 100% (the width could also be in pixels):

    HTML Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center">
    <-- YOUR IMAGE BUBBLE CODE HERE -->
    </td>
    </tr>
    </table>
    There is so many options, and one of these should work for you. Remember if u use the CSS, then you can add it to your stylesheet instead of parsing it inside your HTML document that contains the image bubbles.

    Have fun
    Last edited by CChawps; 07-25-2011 at 05:29 PM.

  7. The Following User Says Thank You to CChawps For This Useful Post:

    balki (07-25-2011)

  8. #6
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    It works fine with table code.
    Thanks a lot (:

  9. #7
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Hi!
    I have a similar problem. I use script for background changing color in this page - http://souhssz.webnode.com/za-uchjenika/ , but I can't remove picture for li

    The source:
    HTML Code:
    <script type="text/javascript" src="http://4433.hit.bg/Colorchange/jquery-1.2.6.pack.js"></script> 	
    
    	<script type="text/javascript"> /* -------------- jQuery code --------------- */
    		$(document).ready(function(){ 
    			$("li.one").click( function(){ $
    				("body").removeClass("bg2 , bg3 , bg4 , bg5 , bg6 bg7").addClass("bg1"); 
    			});
    			$("li.two").click( function(){ $
    				("body").removeClass("bg1 , bg3 , bg4 , bg5 , bg6 bg7").addClass("bg2"); 
    			});
    			$("li.three").click( function(){ $
    				("body").removeClass("bg1 , bg2 , bg4 , bg5 , bg6 bg7").addClass("bg3"); 
    			}); 
    			$("li.four").click( function(){ $
    				("body").removeClass("bg1 , bg2 , bg3 , bg5 , bg6 bg7").addClass("bg4"); 
    			});
    			$("li.five").click( function(){ $
    				("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg6 bg7").addClass("bg5"); 
    			});
    			$("li.six").click( function(){ $
    				("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg7").addClass("bg6"); 
    			});
    			$("li.seven").click( function(){ $
    				("body").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6").addClass("bg7"); 
    			});
    		});
    	</script>
    	
    	<style type="text/css">
    		* { margin: 0; padding: 0; }
    		
    		/* -------------- classes for different background styles --------------- */
    		.bg1 { background: repeat-x; background-color: #c363d8; }
    		.bg2 { background: repeat-x; background-color: #5b82fb; }
    		.bg3 { background: repeat-x; background-color: #60cffb; }
    		.bg4 { background: repeat-x; background-color: #a1fcd6; }
    		.bg5 { background: repeat-x; background-color: #fdf9a9; }
    		.bg6 { background: repeat-x; background-color: #fcc088; }
    		.bg7 { background: repeat-x; background-color: #fc759e; }
    		/* ---------------------------------------------------------------------- */
    		
    		.clear, .one, .two, .three, .four, .five, .six, .seven { cursor: pointer; }
    		ul#icons { position: relative; width: 925px; height: 46px; background: url('https://lh6.googleusercontent.com/-h_6910QHwwY/UBBDreUUVMI/AAAAAAAAC9M/zIrA86dRALI/s925/palette925.png') no-repeat; }
    		#bg p { position: relative; top: 110px; }
    		#bg p a { font-size: 10px; padding: 10px; position: absolute; top: 78px; text-decoration: none; color: #070809; }
    		ul#icons li { position: absolute; list-style: none; }
    		ul#icons li.seven { left: 0px; width: 900px; height: 46px; }
    		ul#icons li.six { left: 112px; width: 900px; height: 46px; }
    		ul#icons li.five { left: 244px; width: 900px; height: 46px; }
    		ul#icons li.four { left: 376px; width: 900px; height: 46px; }
    		ul#icons li.three { left: 508px; width: 900px; height: 46px; }
    		ul#icons li.two { left: 640px; width: 900px; height: 46px; }
    		ul#icons li.one { left: 766px; width: 900px; height: 46px; }
    	</style>
    
    
    
    
    		<div id="buttons">
    			<ul id="icons">
    					<li class="seven"><a href="#"></a></li>
    					<li class="six"><a href="#"></a></li>
    					<li class="five"><a href="#"></a></li>
    					<li class="four"><a href="#"></a></li>
    					<li class="three"><a href="#"></a></li>
    					<li class="two"><a href="#"></a></li>
    					<li class="one"><a href="#"></a></li>
    			</ul>
    		</div>

    Have a nice night (:

  10. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    ok, so get:
    Code:
    ul#icons { position: relative; width: 925px; height: 46px; background: url('https://lh6.googleusercontent.com/-h_6910QHwwY/UBBDreUUVMI/AAAAAAAAC9M/zIrA86dRALI/s925/palette925.png') no-repeat; }
    And remove the part in red.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  11. The Following User Says Thank You to bernie1227 For This Useful Post:

    balki (07-25-2012)

  12. #9
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Perhaps I have not explained properly. I want to remove this picture - , not this one:

    I shouldn't remove the global style for list, because I use it in other pages...

  13. #10
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    So is there an external style for li tags? If so, you can override it using !important in the CSS
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  14. The Following User Says Thank You to bernie1227 For This Useful Post:

    balki (07-27-2012)

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
  •