www.webdeveloper.com
Results 1 to 9 of 9

Thread: shifting group of images horizontally on click (no swap/hide)

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    shifting group of images horizontally on click (no swap/hide)

    On clicking on (independent) next/previous arrows I would like to shift a group/row of 5 images (each 660px x 372px) by their own width (660px) to the right/left.
    Since I have 5 images it should allow just two clicks in each direction.

    This version is as close as I have gotten:
    http://raphaelzwyer.com/testRapha/portfolio_ms.html

    I used WowSlider and different instances of the same image group. Problem: large images (loading time) and not a smooth transition by image width in one direction, it skips images and jumps forth and back.

    Images can be grouped/hold in a div container or an unsorted list like this:
    HTML Code:
    <body><div id="imagewrapper"><ul class="images"><li class="image1"><img src="images/groupe1/img1.png" width="548" height="372" alt="img1" /></li><li class="image2"><img src="images/groupe1/img2.png" width="548" height="372" alt="img2" /></li><li class="image3"><img src="images/groupe1/img3.png" width="548" height="372" alt="img3" /></li><li class="image4"><img src="images/groupe1/img4.png" width="548" height="372" alt="img4" /></li><li class="image5"><img src="images/groupe1/img5.png" width="548" height="372" alt="img5" /></li></ul></body>
    or it can be just one long image comp like that:

    HTML Code:
    <body><div id="imagewrapper"><img src="images/imggroup.jpg" width="3348" height="372" alt="imggroup1" /></div></body>
    No swap or hide, I just literally want the whole group to move.

    I'm a Javascript novice. Tried Javascript and jQuery plugins, image sprite and sliding door techniques. There must be a simple light-weight solution, maybe even just CSS only but I can't figure it out.

    Please help!!
    Thanks!

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    I used the larger image when I did this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>shifting group of images</title>
    
    		<style type="text/css">
    
    			.ShiftGroup IMG {
    				vertical-align: top;
    			}
    			.ShiftGroupI,
    			.ShiftGroupP {
    				position: absolute;
    				width: 660px;
    				left: 50&#37;;
    				top: 0px;
    			}
    			.ShiftGroup,
    			.ShiftGroupC,
    			.ShiftGroupI,
    			.ShiftGroupP {
    				height: 372px;
    			}
    			.ShiftGroup {
    				position: relative;
    				overflow: hidden;
    			}
    			.ShiftGroupC {
    				position: absolute;
    				width: 100%;
    				left: 0;
    				top: 0;
    			}
    			.ShiftGroupI {
    				margin-left: -330px;
    				z-index: 1;
    			}
    			.ShiftGroupP {
    				background-color: #fff;
    				z-index: 2;
    				opacity: 0.9;
    				filter: alpha(opacity=90);
    			}
    			.ShiftGroupD {
    				position: absolute;
    				width: 50px;
    				height: 50px;
    				top: 50%;
    				margin-top: -25px;
    				border: 2px solid #00f;
    			}
    			#ShiftLeft  {right: 20px;}
    			#ShiftRight {left: 20px;}
    
    		</style>
    
    	</head>
    	<body>
    
    		<div class="ShiftGroup">
    			<div class="ShiftGroupC">
    				<div class="ShiftGroupI">
    					<img id="ShiftGallery" src="http://raphaelzwyer.com/testRapha/data1/images/gallery_ms1.jpg" alt="" />
    				</div>
    				<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"></div></div>
    				<div class="ShiftGroupP" style="margin-left: 330px;"><div id="ShiftRight" class="ShiftGroupD"></div></div>
    			</div>
    		</div>
    
    		<script type="text/javascript">
    
    			(function()
    			{
    				var
    					current = 2,
    					images  = 5,
    					width   = 672,
    					busy    = 0,
    					gallery = document.getElementById('ShiftGallery').style;
    
    				gallery.marginLeft = -(width * current) + 'px';
    
    				function mover(fromx, tox)
    				{
    					var i, t = new Date().getTime(), d = 150; busy = 1; gallery.marginLeft = -fromx + 'px';
    					i = setInterval(function() {gallery.marginLeft = -Math.floor(((tox - fromx) * Math.min(Math.max((1 / d) * (new Date().getTime() - t), 0.01), 0.99)) + fromx) + 'px';}, 10);
    					setTimeout(function() {clearInterval(i); gallery.marginLeft = -tox + 'px'; busy = 0;}, d);
    				}
    				document.getElementById('ShiftLeft' ).onclick = function() {var previous = current; if (!busy && current > 0) {mover((width * previous), (width * --current));}};
    				document.getElementById('ShiftRight').onclick = function() {var previous = current; if (!busy && current < (images - 1)) {mover((width * previous), (width * ++current));}};
    
    			}());
    
    		</script>
    
    	</body>
    </html>
    The webpage was tested and works "as-is" in IE7-9, FF and Chrome.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    Thumbs up Thanks!

    Thanks a lot, bionoid!
    Exactly what I was looking for.

    The only thing..., if I click through, every now and then I get a transparent light blue layer on top of some of the images (unfortunately I can't send you a screenshot here). Looks almost like an image-map rollover.
    Other than that, perfect, works like a charm!

    The Javascript part is still Greek to me though but I'll try to understand what exactly you did here and embed it soon.
    I hope you don't mind answering some questions I may have along the way, so I can understand/learn something instead of just copy/paste your solution.

    Again, thank you so much for your time!
    Rapha

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    The blue overlay is caused by the image being selected if you double-clicked the control.
    To try and prevent this I have removed the <img> tag, and substituted it with a <div> and set the gallery as a background image:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>shifting group of images</title>
    
    		<style type="text/css">
    
    			.ShiftGroupI,
    			.ShiftGroupP {
    				position: absolute;
    				width: 660px;
    				left: 50&#37;;
    				top: 0px;
    			}
    			.ShiftGroup,
    			.ShiftGroupC,
    			.ShiftGroupI,
    			.ShiftGroupP,
    			#ShiftGallery {
    				height: 372px;
    			}
    			.ShiftGroup {
    				position: relative;
    				overflow: hidden;
    			}
    			.ShiftGroupC {
    				position: absolute;
    				width: 100%;
    				left: 0;
    				top: 0;
    			}
    			.ShiftGroupI {
    				margin-left: -330px;
    				z-index: 1;
    			}
    			.ShiftGroupP {
    				background-color: #fff;
    				z-index: 2;
    				opacity: 0.9;
    				filter: alpha(opacity=90);
    			}
    			.ShiftGroupD {
    				position: absolute;
    				width: 50px;
    				height: 50px;
    				top: 50%;
    				margin-top: -25px;
    				border: 2px solid #00f;
    			}
    			#ShiftGallery {background: url(http://raphaelzwyer.com/testRapha/data1/images/gallery_ms1.jpg) no-repeat 0 0; width: 3348px;}
    			#ShiftLeft    {right: 20px;}
    			#ShiftRight   {left: 20px;}
    
    		</style>
    
    	</head>
    	<body>
    
    		<div class="ShiftGroup">
    			<div class="ShiftGroupC">
    				<div class="ShiftGroupI"><div id="ShiftGallery"></div></div>
    				<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"></div></div>
    				<div class="ShiftGroupP" style="margin-left: 330px;"><div id="ShiftRight" class="ShiftGroupD"></div></div>
    			</div>
    		</div>
    
    		<script type="text/javascript">
    
    			(function()
    			{
    				var
    					current = 2,
    					images  = 5,
    					width   = 672,
    					busy    = 0,
    					gallery = document.getElementById('ShiftGallery').style;
    
    				gallery.marginLeft = -(width * current) + 'px';
    
    				function mover(fromx, tox)
    				{
    					var i, t = new Date().getTime(), d = 150; busy = 1; gallery.marginLeft = -fromx + 'px';
    					i = setInterval(function() {gallery.marginLeft = -Math.floor(((tox - fromx) * ((1 / d) * (new Date().getTime() - t))) + fromx) + 'px';}, 10);
    					setTimeout(function() {clearInterval(i); gallery.marginLeft = -tox + 'px'; busy = 0;}, d);
    				}
    				document.getElementById('ShiftLeft' ).onclick = function() {var previous = current; if (!busy && current > 0) {mover((width * previous), (width * --current));}};
    				document.getElementById('ShiftRight').onclick = function() {var previous = current; if (!busy && current < (images - 1)) {mover((width * previous), (width * ++current));}};
    
    			}());
    
    		</script>
    
    	</body>
    </html>
    Last edited by bionoid; 08-27-2012 at 02:19 AM.
    JavaScript: Learn | Validate | Compact | bionoid

  5. #5
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    Unhappy Tx! Almost!

    Thanks again, bionoid!
    Let me know whenever you have design/branding issues I can help you with.

    I got it to work, even in EI7 now (I added some opacity filters). Great!
    What I have so far:
    raphaelzwyer.com/testRapha/portfolio_ms.html

    Unfortunately I'm running into unexpected issues now. Stupid unexperienced me, I didn't think of that... This is just one of 36 similar pages, where just the gallery image and the copy changes. Here's the overview page from where they will be accessed:
    raphaelzwyer.com/testRapha/portfolio.html
    (clicking on the first thumb should get you back to our first gallery page)

    Problem:
    Since the background image (on the first page "gallery_ms1.jpg") is defined by the CSS ID "ShiftGallery" I can't just swap it for the individual pages and creating 40 different ShiftGallery instances would be overkill, no?
    Is there a simple way to swap images for the individual pages?
    ShiftGallery code inline on the respective HTML pages or maybe background image in a HTML tag rather than in the style sheet?
    That got me all nervous – I was so close!

    Appreciate your help! Don't let me hang here!
    Rapha

    –– Code follows ––
    Last edited by Rapha; 08-29-2012 at 07:18 PM.

  6. #6
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    The code

    I just can't figure it out!!

    Here's what I did so far:

    The HTML page:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>raphaelzwyer</title>
    <link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    </head>
    
    <body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
    
    <div id="container">
    
    	<div id="topmenu">
        	<ul>
    			<li class="menubuttonactive"><a href="portfolio_ms.html">portfolio</a></li>
                <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
    			<li class="menubuttons"><a href="about.html">about</a></li>
                <li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
    			<li class="menubuttons"><a href="resume.html">resume</a></li>
                <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
    			<li class="menubuttons"><a href="contact.html">contact</a></li>
    		</ul>
    	</div> <!-- end of topmenu -->  
        
        <div id="header"> 
        	<ul id="overviewlayer">
    			<li><img src="images/wordmark.jpg" width="268" height="48" alt="wordmark"/></li>
    			<li><a href="portfolio.html"><span class="menuicon"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menuIcon','','images/menuicon_b.png',1)"><img class="menuicon" src="images/menuicon_a.png" alt="menuicon_overview" name="menuicon" width="44" height="36" border="0"/></span><span class="overview"><img src="images/overview.png" width="660" height="1284" alt="overviewlayer"/></span></a></li>
            </ul>  <!-- end of overviewlayer -->
        </div>  <!-- end of header --> 
        
    	<div id="content">
    		<div class="linesacross">
            <img src="images/linesabovegallery_g.png" width="3348" height="4" alt="divider" /></div> <!-- end of linesacross -->   		
    
        <div class="ShiftGroup">
    			<div class="ShiftGroupC">
    				<div class="ShiftGroupI"><div id="ShiftGallery"></div></div>
    				<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
    			  <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
                </div>  <!-- end of ShiftGroup --> 			
         </div>  <!-- end of ShiftGroupC --> 
    
            
        <div id="description">
            <p id="descriptiontitle">descriptiontitle</p>
            <p id="descriptiontext">description</p>
            </div> <!-- end of description --> 
         
         <div id="layerleft"></div>
         <div id="layerright"></div>
    
      </div> <!-- end of content -->
    
    </div> <!-- end of container -->
    
    <script type="text/javascript" src="js/raphaelzwyer.js"></script>
    
    </body>
    </html>

    The Style Sheet:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * {
    		margin: 0;
    		padding: 0;
    		border: none;}
    @font-face {
    		font-family: 'BotonReg';
    		src: url('../fonts/BotonReg.eot');
    		src: url('../fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
    		url('../fonts/BotonReg.woff') format('woff'),
    		url('../fonts/BotonReg.ttf') format('truetype'),
    		url('../fonts/BotonReg.svg#BotonReg') format('svg');
    		font-weight: normal;
    		font-style: normal;
    		font-variant: normal;} 
    @font-face {
    		font-family: 'BotonMed';
    		src: url('../fonts/BotonMed.eot');
    		src: url('../fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
    		url('../fonts/BotonMed.woff') format('woff'),
    		url('../fonts/BotonMed.ttf') format('truetype'),
    		url('../fonts/BotonMed.svg#BotonMed') format('svg');
    		font-weight: normal;
    		font-style: normal;
    		font-variant: normal;}
    html, body {
    		background-color: #FFFFFF;
    		margin-top: auto;
    		margin-right: auto;
    		margin-bottom: auto;
    		margin-left: auto;
    		color: #a9a9a9;
    		height: 100%;
    		width: 100%;
    		font-family: "BotonMed", "Courier", "Courier New", "Bookman Old Style", serif;
    		font-size: 16px;
    		overflow-y: scroll;
    		letter-spacing: 0.062em;
    		-webkit-font-smoothing: antialiased;
    		font-smoothing: antialiased;
    		font-smooth: 1em;
    		text-shadow: 0 1px 1px rgba(255,255,255,.3);}
    a {
    		text-decoration: none;
    		color: #a9a9a9;}
    a:visited {
    		text-decoration: none;
    		color: #515151;}
    a:hover {
    		text-decoration: none;
    		color: #be1f2d;}
    a:focus {
    		text-decoration: none;
    		color: #be1f2d;}
    li {
    		list-style-type: none;
    		display: inline;}	
    #container {
    		position: relative;
    		top: 0px;
    		margin: 0px auto;
    		width: 860px;
    		min-height: 100%;
    		height: auto !important;
    		height: 100%;
    		border: none;}
    #topmenu {
    		position: relative;
    		top: 0px;
    		left: 212px;
    		width: 660px;
    		height: 48px;}
    .menubuttons {
    		position:relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg.png");
    		background-repeat: repeat-x;
    		padding: 10px 0px 0px 0px;
    		float: left;}
    .menubuttons:visited {
    		position:relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg_v.png");
    		background-repeat: repeat-x;
    		padding: 10px 0px 0px 0px;
    		float: left;}
    .menubuttons:hover {
    		position:relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg_h.png");
    		background-repeat: repeat-x;
    		padding: 10px 0px 0px 0px;
    		float: left;}
    		.menubuttonactive {
    		position:relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg_a.png");
    		background-repeat: repeat-x;
    		padding: 10px 0px 0px 0px;
    		float: left;}
    .menubuttonactive a {
    		color: #be1f2d;}
    .buttonspaces {
    		height: 36px;
    		list-style: none;
    		float: left;}
    #header {
    		position: relative;
    		top: 0px;
    		left: 212px;
    		height: 176px;
    		width: 660px;
    		padding: 32px 0px 0px 0px;
    		float: left;}
    .menuicon {
    		position: relative;
    		top: -10px;
    		padding: 0px 0px 0px 112px;
    		margin: 0px 0px 0px 0px;}
    #overviewlayer a .overview  {
    		display:none;} 
    #overviewlayer a:hover .overview  {
    		display: block;
    		position: absolute;
    		top: 106px;
    		left: 0px;
    		height: 852px;
    		width: 660px;
    		padding: 0px 0px 0px 0px;
    		margin: 0px 0px 0px 0px;
    		color:#000;
    		font-size: 11px;
    		opacity: 0.1;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    		filter: alpha(opacity=10);
    		z-index: +800;}
    .overview {
    		position: relative;
    		top: 12px;
    		left: 1344px;
    		height: 852px;
    		width: 660px;
    		z-index: +10;}
    #content {
    		position: absolute;
    		top: 138px;
    		left: -1132px;
    		width: 3348px;
    		height: 852px;
    		clear: both;
    		z-index: 1;}
    .linesacross {
    		position: relative;
    		top: 0px;
    		left: 0px;
    		height: 4px;
    		width: 3348px;
    		z-index: +80;}
    #layerleft {
    		position: absolute;
    		top: 12px;
    		left: 0px;
    		width: 684px;
    		height: 380px;
    		background-color: white;
    		opacity: 0.9;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    		filter: alpha(opacity=90);
    		z-index: +600;}
    #layerright {
    		position: absolute;
    		top: 12px;
    		left: 2675px;
    		width: 676px;
    		height: 380px;
    		background-color: white;
    		opacity: 0.9;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    		filter: alpha(opacity=90);
    		z-index: +600;}
    .ShiftGroupI,
    .ShiftGroupP {
    		position: absolute;
    		width: 660px;
    		left: 50%;
    		top: 2px;}
    .ShiftGroup,
    .ShiftGroupC,
    .ShiftGroupI,
    .ShiftGroupP,
    #ShiftGallery {height: 372px;}
    .ShiftGroup {
    		position: relative;
    		overflow: hidden;}
    .ShiftGroupC {
    		position: absolute;
    		width: 100%;
    		left: 0;
    		top: 10px;}
    .ShiftGroupI {
    		margin-left: -330px;
    		z-index: 1;}
    .ShiftGroupP {
    		background-color: #fff;
    		z-index: 2;
    		opacity: 0.9;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    		filter: alpha(opacity=90);}
    .ShiftGroupD {
    		position: absolute;
    		width: 50px;
    		height: 50px;
    		top: 50%;
    		margin-top: -25px;}
    #ShiftGallery {
    		background: url("../images/gallery_ms1.jpg") no-repeat 0 0; 
    		width: 3348px;}
    #ShiftLeft    {right: 20px;}
    #ShiftRight   {left: 20px;}
    .thumbs {
    		width: 156px;
    		height: 132px;
    		padding: 0px 12px 12px 0px;
    		float: left;}
    .lastthumbs{
    		 width: 156px;
    		height: 132px;
    		padding: 0px 0px 12px 0px;
    		float: left;}
    #description {
    		position: relative;
    		top: 8px;
    		left: 1344px;
    		width: 660px;
    		height: 172px;}
    #descriptiontitle {
    		position: relative;
    		top: 12px;
    		left: 0px;
    		width: 660px;
    		height: 38px;
    		border-bottom-style: solid;
    		border-width: 4px;
    		font-family: "BotonMed", "Courier", "Courier New", "Bookman Old Style", serif;
    		font-size: 22px;
    		letter-spacing: 0.05em;
    		color: black;
    		margin: 0px 0px 18px 0px;}
    #descriptiontext {
    		font-size: 19px;
    		letter-spacing: 0.02em;}
    #footer {clear: both;}

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by Rapha View Post
    ...

    Problem:
    Since the background image (on the first page "gallery_ms1.jpg") is defined by the CSS ID "ShiftGallery" I can't just swap it for the individual pages and creating 40 different ShiftGallery instances would be overkill, no?
    Is there a simple way to swap images for the individual pages?
    ShiftGallery code inline on the respective HTML pages or maybe background image in a HTML tag rather than in the style sheet?

    ...
    That should be as easy as you've just described it:

    Code:
    #ShiftGallery {
    	background-repeat: no-repeat;
    	background-position: 0 0;
    	width: 3348px;
    }
    Code:
    <div class="ShiftGroup">
    	<div class="ShiftGroupC">
    		<div class="ShiftGroupI"><div id="ShiftGallery" style="background-image: url(../images/gallery_ms1.jpg);"></div></div>
    		<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
    		<div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
    	</div>  <!-- end of ShiftGroup --> 			
    </div>  <!-- end of ShiftGroupC -->
    And since ShiftGallery is an ID in the document you could change the background-image on the fly if you wanted to:

    Code:
    document.getElementById('ShiftGallery').style.backgroundImage = 'url(../images/gallery_ms1.jpg)';
    ------------------------------------------------------------

    If you're using a server side language like PHP, you can just replace the image in html like so:

    Code:
    <div class="ShiftGroup">
    	<div class="ShiftGroupC">
    		<div class="ShiftGroupI"><div id="ShiftGallery" style="background-image: url(<?php echo $gallery_image; ?>);"></div></div>
    		<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></div></div>
    		<div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></div></div>
    	</div>  <!-- end of ShiftGroup --> 			
    </div>  <!-- end of ShiftGroupC -->
    Last edited by bionoid; 08-29-2012 at 07:35 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13
    Wow, thank you so much!
    You just pulled me out again. Lucky me to have found this forum and getting help from some experts like yourself. Getting stuck all the time is not fun and this is probably the only efficient way out of it. I finally feel like I'm getting somewhere.

    I guess I'll go with the first solution for now, at least I understand what it does and why. But I'll certainly look as well into your other suggestions.

    I guess "on the fly" refers to a Javascript solution? I'm quiet new to all this, finally starting to have a better understanding of HTML and CSS. Without further explanation Javascript is still Greek to me though. Is there a good web-source for me to get myself started on Javascript. Do you teach?

    I guess PHP would be important too for CMS. And then there is WordPress... not sure how far I have to go as a designer...

    Oh, one more thing: if you look at my portfolio_ms page there's this little icon (grey rectangles on the top right), on rollover it displays a transparent layer (preview of the overview page). The icon itself should swap too, to a red rollover version ("menuicon_a.png", when rollover "menuicon_b.png") but it doesn't do that anymore. Not sure why.

    Again, thaaaanks!! I owe you.

  9. #9
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13
    <div class="ShiftGroupI"><div id="ShiftGallery" style="background-image: url(../images/gallery_ms1.jpg);"></div></div>
    for some reason didn't work for me so I did the following:
    <div class="ShiftGroupI"><div id="ShiftGallery"><img src="images/gallery_ms1.png" width="3348" height="372" alt="imagegallery1" /></div></div>

    If you look at my portfolio_ms page there's this little icon (grey rectangles on the top right), on rollover it displays a transparent layer (preview of the overview page). The icon itself should swap too, to a red rollover version ("menuicon_a.png", when rollover "menuicon_b.png") but it doesn't do that anymore. Not sure why.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles