?
Solved

Displaying pictures

Posted on 2007-04-02
19
Medium Priority
?
185 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

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 2000 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

752 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