Change the div to an iframe in image gallery

Posted on 2009-02-12
Medium Priority
Last Modified: 2012-06-27
In my image gallery script which dislays a big image in the middle and the thumbnail images below the big image. The decription of the image is displayed in a seperate div next to the big image.

Since the description of the image is going to be lengthy and will be modified by the webmaster often, I want to change this div to an iframe so that if the content goes more, visitors can scoll down to see.

I need your help converting the div to an iframe.

I am attaching the screen shot, code snippets of the index.php page, css and js files.

Any help is appreciated

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<!-- ------------------------------------------ Picture Gallery - Thumbnails------------------------------------------------>	  
        <td colspan="2" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="tbls">
            <td width="50%" align="center" valign="middle"><br /><? 
$query1=mysql_query("select * from ads_details order by id desc");
$row1=mysql_data_seek($query1, 0);
<div id="dhtmlgoodies_slideshow">
<div id="previewPane" align="left" style="width:900px; height:380px" ><br />
<img src="ads/<? echo $fname?>" width="400" /> <span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption" ><?=nl2br($rs['content'])?></div>
<div id="galleryContainer">
<div id="arrow_left" style="height:60px; background-color:#FFFFFF"><img src="arrow_left.gif" height="68" /></div>
<div id="arrow_right"><img src="arrow_right.gif" height="68" /></div>
<div id="theImages">
<!-- Thumbnails -->
$fname = $rs['videoname'];
$mysock = getimagesize("ads/". $fname);
if ($width > $height) { 
$percentage = ($height / $width); 
} else { 
$percentage = ($width / $height); 
$height = $target;
echo "<a href=\"#\" onclick=\"showPreview('ads/".$fname."','".$imgcnt."');return false\"><img src=\"ads/".$fname."\" height=\"70\"></a>";
		} //while
}// if num rows
echo "<br><span class=\"verysmall\">No Picture Gallery.</span><br>";
<!-- End thumbnails -->
<!-- Image captions -->
mysql_data_seek($query1, 0);
<div style="display:inline; width:200px">
<div class="imageCaption"><?=nl2br($rs['content'])?></div></div>
<? } ?>
<!-- End image captions -->
<div id="slideEnd"></div>
</div> <!-- for "theImages" -->
</div> <!-- for "galleryContainer" -->
</div> <!-- for "dhtmlgoodies_slideshow -->
<br /></td>
<!------------------------------------------------END of Picture gallery---------------------------------------------------->	  

Open in new window

Question by:CWS (haripriya)
  • 4
  • 2
LVL 11

Assisted Solution

glumlun earned 800 total points
ID: 23620327
Hi. Ill have a look now at the iframe request.
However You can add scrollbars to a div.

Set a width and height and add:
overflow: scroll;


Accepted Solution

-null- earned 1200 total points
ID: 23620341
Hi there,

You can make a div scrollable using css, without the need for changing it to an iframe.

In the div's style tag, add the following:


This will add scrollbars if they are needed.

If you do not want the horizontal scrollbar to show, add:


LVL 16

Author Comment

by:CWS (haripriya)
ID: 23621010
scrollbars in div did the job.
thanks a lot.
but it doesn't look good without borders. can we have borders too?
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 23621042

Add this to your div style:

border:solid 1px #a0a0a0;

#a0a0a0 is a dark grey border. You can swap that value with any hex colour code.


LVL 16

Author Comment

by:CWS (haripriya)
ID: 23621062
ok, i already added the borders to div style, and aligned the text left. but it is very close to the border. if i give text indent, only first line moves.
what i should do so that there is some space between the border and text.
thanks for the help so far.
LVL 16

Author Comment

by:CWS (haripriya)
ID: 23621075
ok padding done.
LVL 16

Author Closing Comment

by:CWS (haripriya)
ID: 31545963
The accepted solution added the scroll bar only when needed.
thanks again.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 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