CWS (haripriya)
asked on
how to bring the second div on the same line of the first div
I downloaded a 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 just below the big image. Now, the description is going to be bigger, so I want that div to come next to the big image, how to do this.
I am attaching the screen shots, code snippets of the index.php page, css and js files.
Any help is appreciated
Thanks
gallery-new.jpg
image-slideshow.css.txt
image-slideshow.js.txt
I am attaching the screen shots, code snippets of the index.php page, css and js files.
Any help is appreciated
Thanks
<div id="dhtmlgoodies_slideshow">
<div id="previewPane" align="center" ><br />
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption"><?=$rs['content']?></div>
</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 -->
<?
$imgcnt=0;
while($rs=mysql_fetch_array($query1)){
$imgcnt++;
$fname = $rs['videoname'];
$mysock = getimagesize("ads/". $fname);
$target=150;
$width=$mysock[0];
$height=$mysock[1];
if ($width > $height) {
$percentage = ($height / $width);
$width=$target;
$result="width=\"$width\"";
} else {
$percentage = ($width / $height);
$height = $target;
$result="height=\"$height\"";
}
echo "<a href=\"#\" onclick=\"showPreview('ads/".$fname."','".$imgcnt."');return false\"><img src=\"ads/".$fname."\" height=\"70\"></a>";
} //while
}// if num rows
else{
echo "<br><span class=\"verysmall\">No Picture Gallery.</span><br>";
}
?>
<!-- End thumbnails -->
<!-- Image captions -->
<?
mysql_data_seek($query1, 0);
while($rs=mysql_fetch_array($query1)){?>
<div class="imageCaption"><?=$rs['content']?></div>
<? } ?>
<!-- End image captions -->
<div id="slideEnd"></div>
</div> <!-- for "theImages" -->
</div> <!-- for "galleryContainer" -->
</div> <!-- for "dhtmlgoodies_slideshow -->
gallery.jpggallery-new.jpg
image-slideshow.css.txt
image-slideshow.js.txt
ASKER
it displays the content by the side, but the previewpane is not upto the size of the gallery. Also, when i click on the images in the gallery, the content again goes to the bottom of the image. something should be done is the css file.
Is this how you did it. Replacing 2-6 in your code above
<div id="previewPane" align="center" ><br />
<div style="display:inline">
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
</div>
<div style="display:inline">
<div id="largeImageCaption"><?=$rs['content']?></div>
</div>
</div>
The big image should have a align: left eg <img src="sss.jpg" align="left"/> or withing the div containing the large image add text-align: left.
MD
MD
You have align center change it to align: left....This should do.
MD
MD
ASKER
please ignore the above Admin comment. I selected it by mistake.
@sunithnair,
No. I gave in the style in the same div tag.
Anyhow, when I tried your code, same results.
@myderrick
Changing the alignment didn't work.
@sunithnair,
No. I gave in the style in the same div tag.
Anyhow, when I tried your code, same results.
@myderrick
Changing the alignment didn't work.
Can you please post a link to the page where I can take a look at if possible?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@sunithnair,
sorry, I was offline and was trying from scratch with table layouts instead of css. So, I could not give you the link on time. Thanks for your help so far.
@Steggs
it worked perfect!
thanks a lot Steggs.
sorry, I was offline and was trying from scratch with table layouts instead of css. So, I could not give you the link on time. Thanks for your help so far.
@Steggs
it worked perfect!
thanks a lot Steggs.
ASKER
thanks for you time, ee needs lot of experts like you :)
ASKER
One more question related to this image gallery.
https://www.experts-exchange.com/questions/24136423/Change-the-div-to-an-iframe-in-image-gallery.html
https://www.experts-exchange.com/questions/24136423/Change-the-div-to-an-iframe-in-image-gallery.html
Open in new window