Results 1 to 2 of 2

Thread: Gallery image div ref to CSS and Javascript

  1. #1
    Registered
    Join Date
    Oct 2012
    Location
    Brooklyn, New York
    Posts
    1
    Rep Power
    0

    Gallery image div ref to CSS and Javascript

    Need some help here, it's driving me nuts.

    Here's the work in progress:
    http://www.raphaelzwyer.com/testRaph..._gentherm.html

    For the images in the gallery (five at a time, right now compiled into one large image) I have the following HTML code:

    HTML Code:
    <div class="ShiftGroup">
    			<div class="ShiftGroupC">
                <div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_kaust1.jpg" width="3348" height="370" alt="imagegallery1" /></div></div>
    			<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
    			<div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>
                </div>  <!-- end of ShiftGroup --> 			
         </div>  <!-- end of ShiftGroupC -->

    CSS:
    Code:
    .ShiftGroupI,
    .ShiftGroupP {
    		position: absolute;
    		width: 660px;
    		left: 50%;
    		top: -10px;}
    .ShiftGroup, .ShiftGroupC, .ShiftGroupI, .ShiftGroupP, #ShiftGallery {height: 370px;}
    .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.8;
    		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    		filter: alpha(opacity=80);}
    .ShiftGroupD {
    		position: absolute;
    		width: 50px;
    		height: 50px;
    		top: 50%;
    		margin-top: -25px;}
    #ShiftGalleryFive {
    		background: url("#") no-repeat 0 0; 
    		width: 3348px;}
    #ShiftLeft    {right: 14px;}
    #ShiftRight   {left: 14px;}
    Javascript:
    Code:
    // JavaScript Document
    
    (function()
    			{
    				var
    					current = 2,
    					images  = 5,
    					width   = 672,
    					busy    = 0,
    					gallery = document.getElementById('ShiftGalleryFive').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));}};
    
    			}());
    			
    			
    			function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    There are transparent layers on each side to cover the images not currently in the center.


    I would like to have each of the five images as separate CSS background images (faster load, easier managing, better image quality...) and not, as they are now, embedded in HTML, but I don't know how to do it without ending up having to use a separate CSS class or ID for every single image.


    How exactly would I reference the images in a simple way (maybe I have to just number them and put them in different folders, one per page, but how...)?!
    I'm a newbie, not familiar with Javascript or content management so I'd probably need a concrete example of how HTML, CSS and Javascript work together to reference and load the images plus how that goes together with the forward back function. It would probably be easier for me to understand when using the same ID's and classes in the example.


    Thanks!!

  2. #2
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    Not in Solomons anymore.
    Posts
    3,441
    Rep Power
    21
    Welcome to the forum. I'm sure you'll get some replies here, and hopefully useful at that. But note, since your website is not hosted on this platform, any suggestions may not apply to you. Differences in webhost's file structure and what not.. Good luck though!
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

Posting Permissions

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