[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

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?

0
lvollmer
Asked:
lvollmer
  • 10
  • 9
1 Solution
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now