list with images

gabrielebr · December 9, 2010

hello,I would like to make a list of items on the left of the page.On the rest of the page a would like to have a div that shows different images (jpg) according to the item on the left that I click.Could you give me some code that I can copy and paste (and then adapt to my needs) ?Thank youGabriele

dsonesuk · December 9, 2010

hello,I would like to make a list of items on the left of the page.On the rest of the page a would like to have a div that shows different images (jpg) according to the item on the left that I click.Could you give me some code that I can copy and paste (and then adapt to my needs) ?Thank youGabriele

Is javascript/jquery allowed this time?

ShadowMage · December 9, 2010

Is javascript/jquery allowed this time?

It almost has to be if the page should not be reloading...All you need to do is have your list with ids/innerHTML set to file names:<ul id='image_nav'><li id='pic1' onclick='changePic(this);'>pic1.jpg</li><li id='pic2' onclick='changePic(this);'>pic2.jpg</li></ul>and use either the id or innerHTML in a function that changes the src attribute of an image in the div.function changePic(el) {var file = el.innerHTML;document.getElementById("my_image").src = "images/"+file;}I used innerHTML for mine but you could use ID. The principle is the same.

dsonesuk · December 9, 2010

It almost has to be if the page should not be reloading...All you need to do is have your list with ids/innerHTML set to file names:<ul id='image_nav'><li id='pic1' onclick='changePic(this);'>pic1.jpg</li><li id='pic2' onclick='changePic(this);'>pic2.jpg</li></ul>and use either the id or innerHTML in a function that changes the src attribute of an image in the div.function changePic(el) {var file = el.innerHTML;document.getElementById("my_image").src = "images/"+file;}I used innerHTML for mine but you could use ID. The principle is the same.

Like I said depends if we are allowed to use javascript/jquery, topic not under JavaScript is it, poster last project, if i remember correctly, js was frowned upon. right if javascript or php you can use below, if javascript disabled the image will load on its own showing the image only, user has to hit back button to return to original page. The php will work in either case, but the page will reload each time.galler01.php (note: if change filename also change filename referenced in page links for php section only)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var imgarray= new Array('image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg');$(document).ready(function()	{	anchorcount=0;$('#left a').each(function(){	// for each menu item$(this).attr("href", "java script:void(0)");$(this).attr("rel", anchorcount);anchorcount++;	});$(".linktolarge").click(function () {var indexref = $(this).attr("rel");$("#gall_img").attr("src" ,"images/"+imgarray[indexref]);$("#gall_img").attr("alt" ,imgarray[indexref]);$("#gall_img").attr("title" ,imgarray[indexref]);		});});/*--*//*]]>*/</script><style type="text/css">#wrapper {width:960px; min-height:250px; }#left, #left2 {width:200px; min-height:250px; background-color:#FFCC66; float:left; }#gallery, #gallery2 { min-height:250px; margin-left: 210px; background-color:#3399CC;}#left a, #left2 a {display:block; text-align:center; width: 100%; height: 25px; line-height:25px;text-decoration:none; background-color:#3399CC; margin: 1px 0;color:#FFCC66;}</style></head><body><div id="wrapper"><h3>Javascript</h3><div id="left"><a class="linktolarge" href="images/image1.jpg">Image 1</a><a class="linktolarge" href="images/image2.jpg">Image 2</a><a class="linktolarge" href="images/image3.jpg">Image 3</a><a class="linktolarge" href="images/image4.jpg">Image 4</a><a class="linktolarge" href="images/image5.jpg">Image 5</a></div><?php$imgarray = array('image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg');$titlearray = array('Image 1', 'Image 2', 'Image 3', ' Image 4', 'Image 5');?><div id="gallery"><img id="gall_img" src="image/image1.jpg" alt="" /></div><h3>PHP</h3><div id="left2"><?phpfor ($i=0; $i<count($imgarray); $i++){echo '<a href="gallery01.php?imgref='.$i.'">'.$titlearray[$i].'</a>';}?></div><?phpif(isset($_GET['imgref']) && isset($imgarray[$_GET['imgref']]))	{	if(file_exists("images/".$imgarray[$_GET['imgref']]))		{?>		<div id="gallery2"><img src="<?php echo 'mages/'.$imgarray[$_GET['imgref']]; ?>" alt="<?php echo $titlearray[$_GET['imgref']]; ?>" title="<?php echo $titlearray[$_GET['imgref']]; ?>" /></div><?php		}	}else	{//No image found show first image, or display error message?><div id="gallery2"><img src="<?php echo "images/".$imgarray[0]; ?>" alt="<?php echo $titlearray[0]; ?>" title="<?php echo $titlearray[0]; ?>" /></div><?php	}?></div></body></html>

gabrielebr · December 10, 2010

Thank you ShadowMage and Dsonesuk !Dsonesuk is well aware about my previous questions ! In those cases I was working on an "istitutional" web site with many constraints about accessibility and javascript was not allowed (or at least the page must work with javascript disabled).I'm now trying to update the website on the Company for which I'm working (as a Chemist not as Webmaster...) and I would say that I'm free to use anything.I made a trial adapting the code used in index.php where "gallery" div receives the input as php command.The result (not working) is here http://www.farchemia.it/prova/prodlist.php?bg=bethanechol (i did it just for the betanechol item). In reality the code works if I link a bethanechol.html but it doesn't if I link a pdf or a jpg,gif, png. For the image is probably logical that it can't work as I belive I shoul modify the line "include($_GET['bg'].'.pdf');" inserting somewhere the "img" tag. But I don't know how tho write the code. On the other hand I would like to avoid the transform into html all the products pages that I have already in pdf and jpg.Therefore: I can try to use the code you suggested OR somebody could help me to adjust the code in the "prodlist.php"

dsonesuk · December 10, 2010

if you plan to use different file specifically type jpg and gif, if not using array to provide links and full image file name and type, you will have to pass the whole filename, OR a value telling what type of file you want to display in the query string.option 1prodlist.php?bg=bethanechol.jpg prodlist.php?bg=bethanechol.gifoption 2prodlist.php?bg=bethanechol&type=jpgprodlist.php?bg=bethanechol&type=gifoption 1

 <?php if(isset($_GET['bg']))	 {	 if(file_exists("images/".$_GET['bg']))		 { 		 echo '<img src="images/'.$_GET['bg'].'" alt="'.$_GET['bg'].'" title="'.$_GET['bg'].'" />';		 }	 } else	 {  echo "Error No File Found"; 	 } ?>

ORoption2 (could be mainly used to identify images, flash, movie file type and adjust code accordingly, if flv, swf, wmv etc)

<?phpif(isset($_GET['bg']))	{	if(file_exists("images/".$_GET['bg'].".".$_GET['type']))		{		echo '<img src="images/'.$_GET['bg'].'.'.$_GET['type'].'" alt="'.$_GET['bg'].'.'.$_GET['type'].'" title="'.$_GET['bg'].'.'.$_GET['type'].'" />';		}	}else	{echo "Error No File Found";	}?>

gabrielebr · December 10, 2010

if you plan to use different file specifically type jpg and gif, if not using array to provide links and full image file name and type, you will have to pass the whole filename, OR a value telling what type of file you want to display in the query string.option 1prodlist.php?bg=bethanechol.jpg prodlist.php?bg=bethanechol.gifoption 2prodlist.php?bg=bethanechol&type=jpgprodlist.php?bg=bethanechol&type=gifoption 1
 <?php if(isset($_GET['bg']))	 {	 if(file_exists("images/".$_GET['bg']))		 { 		 echo '<img src="images/'.$_GET['bg'].'" alt="'.$_GET['bg'].'" title="'.$_GET['bg'].'" />';		 }	 } else	 {  echo "Error No File Found"; 	 } ?>
ORoption2 (could be mainly used to identify images, flash, movie file type and adjust code accordingly, if flv, swf, wmv etc)
<?phpif(isset($_GET['bg']))	{	if(file_exists("images/".$_GET['bg'].".".$_GET['type']))		{		echo '<img src="images/'.$_GET['bg'].'.'.$_GET['type'].'" alt="'.$_GET['bg'].'.'.$_GET['type'].'" title="'.$_GET['bg'].'.'.$_GET['type'].'" />';		}	}else	{echo "Error No File Found";	}?>

Thank youI copied your code but probably I made some mistake because now the page is not worning (nothing appears on the page:http://www.farchemia.it/prova/prodlist.php)

gabrielebr · December 10, 2010

I found the mistake I made.Your suggestion works perfectly !Once again: thank you so much.Regardsgabriele

dsonesuk · December 10, 2010

you have to change the path to your image file location, my example had file location in a folder called images, your images seem to be located in the same location as your php page, soo remove images/ (best i highlight)?php if(isset($_GET['bg'])) { if(file_exists("images/".$_GET['bg'])) { echo '<img src="images/'.$_GET['bg'].'" alt="'.$_GET['bg'].'" title="'.$_GET['bg'].'" />'; } else { echo "Error No File Found"; } } ?>

gabrielebr · December 10, 2010

you have to change the path to your image file location, my example had file location in a folder called images, your images seem to be located in the same location as your php page, soo remove images/ (best i highlight)?php if(isset($_GET['bg'])) { if(file_exists("images/".$_GET['bg'])) { echo '<img src="images/'.$_GET['bg'].'" alt="'.$_GET['bg'].'" title="'.$_GET['bg'].'" />'; } else { echo "Error No File Found"; } } ?>

Yes, this was the error.Anyway I can't use this method because prodlist.php is already loaded by index php. When I chose i product just prodlist is reloaded and I lose the header and also the formatting of the page.I fear I will have to try the javascript metod.Thank yougabriele

dsonesuk · December 10, 2010

you might able to use this thenindex.php?bg=prodlist&img=bethanechol.jpgthe bg=prodlist will load the page in include, while the img=bethanechol.jpg will give the reference to the image.<?php if(isset($_GET['img'])) { if(file_exists(".$_GET['img'])) { echo '<img src=".$_GET['img].'" alt="'.$_GET['img'].'" title="'.$_GET['img'].'" />'; } else { echo "Error No File Found"; } } ?>

gabrielebr · December 10, 2010

you might able to use this thenindex.php?bg=prodlist&img=bethanechol.jpgthe bg=prodlist will load the page in include, while the img=bethanechol.jpg will give the reference to the image.<?php if(isset($_GET['img'])) { if(file_exists(".$_GET['img'])) { echo '<img src=".$_GET['img].'" alt="'.$_GET['img'].'" title="'.$_GET['img'].'" />'; } else { echo "Error No File Found"; } } ?>

now the page doesn't display anything.Perhaps I made a cut and paste error ?

dsonesuk · December 10, 2010

where will the list of the images or whatever file type be listed?master page the one the include is used to insert the content, OR the actual included content page itself.

gabrielebr · December 10, 2010

where will the list of the images or whatever file type be listed?master page the one the include is used to insert the content, OR the actual included content page itself.

index php launches prodlist.phpprodlist.php contains on the left the list of the products and on the right the div "gallery" that displays the image

dsonesuk · December 10, 2010

this forum its getting slow and everything locking up, why ending up with double post sorry!

dsonesuk · December 10, 2010

Right just looked at your page from index page to get what you are trying the achieve.http://www.farchemia.it/prova/index.php"]http://www.farchemia.it/prova/index.php => home pagehttp://www.farchemia.it/prova/index.php?bg=prodlist"]http://www.farchemia.it/prova/index.php?bg=prodlist => product pagewhere you have something similar to this in index.php page, yes <?phpif(isset($_GET['bg'])){ if(file_exists($_GET['bg'].'.php')) { include($_GET['bg'].'.php'); } else { echo "Error"; }}?>in the prodlist.php page you should have something similar to this

<div id="wrapper"><h3>PHP</h3><div id="left2"><a href="index.php?bg=prodlist&img=image1.jpg">Image 1</a><a href="index.php?bg=prodlist&img=image2.jpg">Image 2</a><a href="index.php?bg=prodlist&img=image3.jpg">Image 3</a><a href="index.php?bg=prodlist&img=image4.jpg"> Image 4</a><a href="index.php?bg=prodlist&img=image5.jpg">Image 5</a><a href="index.php?bg=prodlist&img=image6.jpg"> Image 6</a><a href="index.php?bg=prodlist&img=image7.jpg">Image 7</a></div><!-- END left2 --><div id="gallery2"><?php//this retrieves information of image file (img=image7.jpg) name to show from selection from list in this prodlist pageif(isset($_GET['img'])) 	{	if(file_exists($_GET['img']))		{		echo '<img src="'.$_GET['img'].'" alt="'.$_GET['img'].'" title="'.$_GET['img'].'" />';			}		 else		   {			   echo "error not found"; // OR use a image to show image not found			}	   }?></div><!-- END gallery2 --></div><!--END wrapper -->

gabrielebr · December 10, 2010

Right just looked at your page from index page whatyou are trying the achieve.http://www.farchemia.it/prova/index.php => home pagehttp://www.farchemia.it/prova/index.php?bg=prodlist => product pagewhere you have something similar to this in index.php page, yes <?phpif(isset($_GET['bg'])){ if(file_exists($_GET['bg'].'.php')) { include($_GET['bg'].'.php'); } else { echo "Error"; }}?>in the prodlist.php page you should have something similar to this
<div id="wrapper"><h3>PHP</h3><div id="left2"><a href="index.php?bg=prodlist&img=image1.jpg">Image 1</a><a href="index.php?bg=prodlist&img=image2.jpg">Image 2</a><a href="index.php?bg=prodlist&img=image3.jpg">Image 3</a><a href="index.php?bg=prodlist&img=image4.jpg"> Image 4</a><a href="index.php?bg=prodlist&img=image5.jpg">Image 5</a><a href="index.php?bg=prodlist&img=image6.jpg"> Image 6</a><a href="index.php?bg=prodlist&img=image7.jpg">Image 7</a></div><div id="gallery2"><?php//this retrieves information of image file (img=image7.jpg) name to show from selection from list in this prodlist pageif(isset($_GET['img'])) 	{	if(file_exists($_GET['img']))		{		echo '<img src="'.$_GET['img'].'" alt="'.$_GET['img'].'" title="'.$_GET['img'].'" />';			}		 else		   {			   echo "error not found"; // OR use a image to show image not found			}	   }?></div></div>

Thank you very much. Now I cannot try. I will do it asap and let you know.Do you prefer a send a personal message to you or will you check the forum ?Many thanksgabriele

dsonesuk · December 10, 2010

better post to forum, some of the girls here get in right huff if you send topic through PM, they start ganging up together, and i end up taking the flack.

gabrielebr · December 11, 2010

Hello Dsoneuk,I'm uable to make the php work. On the other hand it is perhaps not the best solution the reload the pages each time on product is clicked.Could you suggest a simpe way with css and some javascript ?In the old version of the web site I had something similar (http://www.farchemia.it/fotopicc.htm#nogo).As usual it was copied and pasted from a ready to use demo and just adapetd.regardsgabriele

dsonesuk · December 11, 2010

insert your image file names ONLY! in the arrayvar imgarray= new Array('image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg');they will relate exact to the order the links with class 'linktolarge' so make sure anchor text relates to order of image in array.if the path to image needs to be changed, then look for below and change also$("#gall_img").attr("src" ,"images/"+imgarray[indexref]);javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript"> /*<![CDATA[*//*---->*/  var imgarray= new Array('image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg');  $(document).ready(function()	 {	  anchorcount=0; $('a.linktolarge').each(function(){	// for each menu item  $(this).attr("href", "java script:void(0)");  //IMPORTANT remove space between java and script, forum put in a space when posting.  $(this).attr("rel", anchorcount); anchorcount++;	 });    $("a.linktolarge").click(function () { var indexref = $(this).attr("rel"); $("#gall_img").attr("src" ,"images/"+imgarray[indexref]); $("#gall_img").attr("alt" ,imgarray[indexref]); $("#gall_img").attr("title" ,imgarray[indexref]);		 }); });      /*--*//*]]>*/ </script>

html links: adjust to needs (as in path to images), the image href is set temporary it will be overwritten, but if javascript disabled these image will still be accessed but will open in new page instead.

<a class="linktolarge" href="images/image1.jpg">Image 1</a> <a class="linktolarge" href="images/image2.jpg">Image 2</a> <a class="linktolarge" href="images/image3.jpg">Image 3</a> <a class="linktolarge" href="images/image4.jpg">Image 4</a> <a class="linktolarge" href="images/image5.jpg">Image 5</a>

html: where large image will show, you need a default image i used the first image, but you could easilly use a 1px image to begin with.

<img id="gall_img" src="image/image1.jpg" alt="" />

gabrielebr · December 11, 2010

Thank you.why is the script needed ? And why is the array needed?isn't it possible to write jast a command like :a href onclick...being the href the image I want to display into the div ?On the left of the div I have simple list of names of the productsEach item of the list could just open its related image when on click ...Is it possible ?

dsonesuk · December 11, 2010

heres a less complicated solutuon, no arrays, just use href value to store, and then access when needed, it does not matter what order you place them as long as they have the class 'linktolarge' it will know what changes to make to work correctly.javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function()	{$('#left a').each(function(){	// for each menu itemimagelink = $(this).attr("href");$(this).attr("href", "java script:void(0)"); //IMPORTANT remove space between java and script, forum put in a space when posting$(this).attr("rel", imagelink);	});$(".linktolarge").click(function () {var imagelink = $(this).attr("rel");var image_alt = $(this).html();$("#gall_img").attr("src", imagelink);$("#gall_img").attr("alt", image_alt);$("#gall_img").attr("title", image_alt);		});});/*--*//*]]>*/</script>

html: links (no change)

<a class="linktolarge" href="images/image1.jpg">Image 1</a> <a class="linktolarge" href="images/image2.jpg">Image 2</a> <a class="linktolarge" href="images/image3.jpg">Image 3</a> <a class="linktolarge" href="images/image4.jpg">Image 4</a> <a class="linktolarge" href="images/image5.jpg">Image 5</a>

html: where larege image will show (no change)

<img id="gall_img" src="image/image1.jpg" alt="" />

you have links the jquery library files, so the jquery will work.the jquery will take the value from href to store in a attribute called rel, it will then replace the href value with"java script: void(0)" which will cause it not to relaod, if however js is disabled the href value to image will remain in tacked an the image will load in another separate page.the jquery click function will get the rel value (link to large image) from the currently clicked item, plus the link text and replace the current src, title/alt alt attributes, of the img with id="gall_img" with new values.You dont have to add onclick="..." all that is taking care of by jquery you just add<a class="linktolarge" href="images/image4.jpg">Image 4</a> as you normally would

gabrielebr · December 11, 2010

Thank you very much.Another question (until you don't run out of patience...):In products.php (or html) I don't have the <head>...</head> as it must be inserted as a piece of code into index.php when the page is called by tje menu.So I can't add <script>...</script>I imagine I have to add it into index.php, or is there another method to add it just to products.html (or php) ?Thank you again...gabriele

dsonesuk · December 11, 2010

Thank you very much.Another question (until you don't run out of patience...):In products.php (or html) I don't have the <head>...</head> as it must be inserted as a piece of code into index.php when the page is called by tje menu.So I can't add <script>...</script>I imagine I have to add it into index.php, or is there another method to add it just to products.html (or php) ?Thank you again...gabriele

you can add <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>to the <head> ..</head> of index page. you can add the rest anywhere, index.php head, or in products page, as it won't give an error if it can't find an link with class 'linktolarge', unlike javascript would when looking for element with id ref, that does not exist. OR place it in external js file and link to that, all in index.php <head>, would probably be best.slight adjustment in code (in red)$(document).ready(function() {$('.linktolarge').each(function(){ // for each menu itemimagelink = $(this).attr("href");$(this).attr("href", "java script:void(0)"); //IMPORTANT remove space between java and script, forum put in a space when posting$(this).attr("rel", imagelink); });$(".linktolarge").click(function () {var imagelink = $(this).attr("rel");var image_alt = $(this).html();$("#gall_img").attr("src", imagelink);$("#gall_img").attr("alt", image_alt);$("#gall_img").attr("title", image_alt); });});

gabrielebr · December 12, 2010

Good morning,there is a problem and the page doesn't work.The problem is most probably here:$(this).attr("href", "java script:void(0)"); //IMPORTANT remove space between java and script, forum put in a space when postingYou can see the page here (http://www.farchemia.it/prova/index.php?bg=prodlist)Thank youGabriele

list with images

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived