Solved

Displaying pictures

Posted on 2007-04-02
19
182 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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