Displaying pictures

I have a page that draws some content in from a CMS.

The page has two div columns - a left div and a right div. The left column has code that pulls in some pictures. The code HAS to reside in the left column.

The pictures are pulled in by a CMS controlled variable . The variable is <%pictures%>

The <%pictures%> variable spits out image code.

ie:
<img src="http://images.server.com/image1bc.jpg">
<img src="http://images.server.com/image1dfr.jpg">
<img src="http://images.server.com/image1sdf.jpg">
<img src="http://images.server.com/image1f.jpg">


The amount of images can be unlimited. It depends how many pictures are in the CMS.


My problem is that the pictures need to appear in the right div column. Is there some way i can store the images in some type of javascript -or other type - of variable and then display the contents of that variable (img code) on the right side of the page?

lvollmerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

steelseth12Commented:
You dont need to store them anywhere .... just move the echo statements in the right column
0
lvollmerAuthor Commented:
As I stated

>>The code HAS to reside in the left column.

code = <%picture%>
0
steelseth12Commented:
<%picture%> .... what is that a constant ?
are you using a template system ?? which one ?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lvollmerAuthor Commented:
yes a constant


it is the saxotech publishing system.
0
steelseth12Commented:
if it is indeed a contant you could try $pictures = picture ; and echo the variable on the right div
0
lvollmerAuthor Commented:
I guess it isn't constant because that doesn;t work.
0
steelseth12Commented:
My quess is that <%picture%> is parsed by the CMS tempate engine and then the apropriate function to display the images is called.
I am not familiar with saxotech cms but if you could isolate the function it might help.
0
lvollmerAuthor Commented:
I can't get hold of what the code actually does. all I know is that it spits out <img src> code .
0
steelseth12Commented:
why cant you move the code to the right div ??
0
lvollmerAuthor Commented:
because its attached to a <%story%>  tag that HAS to be inserted on the left div. There is no way around it.
0
steelseth12Commented:
well  you could try this way although i personally wouldnt do it.

<script language="javascript">

      function get_images(){
      
      var images = document.getElementById("images_left").innerHTML;
      
            
      document.getElementById("images_right").innerHTML = images;
      
      }

</script>

<body onload="get_images();">

<div id="images_left" style="display:none;">
<%picture%>

</div>
<div id="images_right">



</div>
0
lvollmerAuthor Commented:
Should I be inserting anythin g into the div id="images_right"?


The code has the images being called in on the left side yet no images displaying in the right side.
0
steelseth12Commented:
dont forget <body onload="get_images();">
0
lvollmerAuthor Commented:
just got it working.... one problem I have is that it will display the first img src, but it will not display any img src after that.
0
steelseth12Commented:
can view the source and post images_left div with its   contents.
0
lvollmerAuthor Commented:
<div id="images_left" style="display:none;">
<SCRIPT LANGUAGE="JavaScript1.2">
function NewWindow(height,width,url)
{window.open(url,"ShowProdWindow","menubars=0,scrollbars=0,resizable=1,height="+height+",width="+width);
}
</SCRIPT>

<a href="javascript:NewWindow(81,105,'/apps/pbcs.dll/misc?url=/misc/zoom.pbs&Site=BH&Date=20070403&Category=BUSINESS01&ArtNo=704030341&Ref=V1&Profile=1066');">
<div class="photo_box"><div style ="padding:5px 5px 5px 5px;"><img src="http://cmsimg.com/apps/pbcsi.dll/bilde?Site=BH&Date=20070403&Category=&ArtNo=704030341&Ref=V1&Profile=1066&MaxW=300" border="0"></a></img></div>
<div class="photocredit" style = "position: relative;display: block;height: auto;width: 300px;text-decoration: none;font-family: Verdana, sans-serif;      color: #0A6EA5;font-size: 9px;font-weight: bold;padding:0px 5px 5px 5px">TJN</div>

<div class="photocaption" style = "position: relative;display: block;height: auto;width: 300px;text-decoration: none;font-family: verdana, sans-serif;font-size: 11px;padding-left:7px;font-weight: normal;float: left;">Deanna Caption</div>
</div>
</div>

<div id="images_left" style="display:none;">
<SCRIPT LANGUAGE="JavaScript1.2">
function NewWindow(height,width,url)
{window.open(url,"ShowProdWindow","menubars=0,scrollbars=0,resizable=1,height="+height+",width="+width);
}

</SCRIPT>

<a href="javascript:NewWindow(81,105,'/apps/pbcs.dll/misc?url=/misc/zoom.pbs&Site=BH&Date=20070403&Category=BUSINESS01&ArtNo=704030341&Ref=V2&Profile=1066');">
<div class="photo_box"><div style ="padding:5px 5px 5px 5px;"><img src="http://cmsimg..com/apps/pbcsi.dll/bilde?Site=BH&Date=20070403&Category=BUSINESS01&ArtNo=704030341&Ref=V2&Profile=1066&MaxW=300" border="0"></a></img></div>

<div class="photocredit" style = "position: relative;display: block;height: auto;width: 300px;text-decoration: none;font-family: Verdana, sans-serif;      color: #0A6EA5;font-size: 9px;font-weight: bold;padding:0px 5px 5px 5px">TJN2</div>
<div class="photocaption" style = "position: relative;display: block;height: auto;width: 300px;text-decoration: none;font-family: verdana, sans-serif;font-size: 11px;padding-left:7px;font-weight: normal;float: left;">Caption 2</div>
</div>



_____________

It appears that the CMS inserts an image in images_left for each img uploaded. The javascript is only pulling the first image in. Is there a way to alter it so that we collect all innerHTML for all images_left div?
0
steelseth12Commented:
it looks like you are inserting a <div id="images_left" style="display:none;"> for each image.
It should be on div with all the images inside.
0
lvollmerAuthor Commented:
the problem with that is that the img is attached to text which has to be displayed.
0
steelseth12Commented:
if you must use more than one div ... you have to give them different id and add them to the images variable.

var images = document.getElementById("images_left").innerHTML;
images +=      document.getElementById("images_left1").innerHTML;
images +=      document.getElementById("images_left2").innerHTML;

etc

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.