Solved

Displaying pictures

Posted on 2007-04-02
19
180 Views
Last Modified: 2011-09-20
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
Comment
Question by:lvollmer
  • 10
  • 9
19 Comments
 
LVL 20

Expert Comment

by:steelseth12
ID: 18838389
You dont need to store them anywhere .... just move the echo statements in the right column
0
 

Author Comment

by:lvollmer
ID: 18838410
As I stated

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

code = <%picture%>
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 18838464
<%picture%> .... what is that a constant ?
are you using a template system ?? which one ?
0
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 

Author Comment

by:lvollmer
ID: 18838477
yes a constant


it is the saxotech publishing system.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 18838523
if it is indeed a contant you could try $pictures = picture ; and echo the variable on the right div
0
 

Author Comment

by:lvollmer
ID: 18838561
I guess it isn't constant because that doesn;t work.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 18838580
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
 

Author Comment

by:lvollmer
ID: 18838736
I can't get hold of what the code actually does. all I know is that it spits out <img src> code .
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 18838801
why cant you move the code to the right div ??
0
 

Author Comment

by:lvollmer
ID: 18838825
because its attached to a <%story%>  tag that HAS to be inserted on the left div. There is no way around it.
0
 
LVL 20

Expert Comment

by:steelseth12
ID: 18839016
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
 

Author Comment

by:lvollmer
ID: 18839504
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
 
LVL 20

Expert Comment

by:steelseth12
ID: 18845403
dont forget <body onload="get_images();">
0
 

Author Comment

by:lvollmer
ID: 18845433
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
 
LVL 20

Expert Comment

by:steelseth12
ID: 18845467
can view the source and post images_left div with its   contents.
0
 

Author Comment

by:lvollmer
ID: 18846731
<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
 
LVL 20

Expert Comment

by:steelseth12
ID: 18846830
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
 

Author Comment

by:lvollmer
ID: 18846878
the problem with that is that the img is attached to text which has to be displayed.
0
 
LVL 20

Accepted Solution

by:
steelseth12 earned 500 total points
ID: 18846909
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question