Change the div to an iframe in image gallery

Posted on 2009-02-12
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:Haripriya Sathiish
    LVL 11

    Assisted Solution

    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;

    LVL 5

    Accepted Solution

    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:Haripriya Sathiish
    scrollbars in div did the job.
    thanks a lot.
    but it doesn't look good without borders. can we have borders too?
    LVL 5

    Expert Comment


    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:Haripriya Sathiish
    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:Haripriya Sathiish
    ok padding done.
    LVL 16

    Author Closing Comment

    by:Haripriya Sathiish
    The accepted solution added the scroll bar only when needed.
    thanks again.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    CSS/audio questions 2 43
    How to represnt 52 selections 1 24
    GPS save in database 19 22
    Adding a menu section 13 25
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    746 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now