Solved

Enlarge

Posted on 2013-07-01
9
380 Views
Last Modified: 2013-08-08
Hi expert. How to implement it per the attached image. When the user clicks the image on the bottom, it will be displayed on the top. While the user clicks the top image, the top image will be enlarged. Thank you!
Image.jpg
0
Comment
Question by:jessyj
  • 4
  • 3
9 Comments
 
LVL 26

Accepted Solution

by:
skullnobrains earned 500 total points
ID: 39292348
big image
<img id="bigimage" src="whatever" onClick="window.location=this.src" />

small images
<img src="small_image_thumbnail" onclick="javascript: document.getelementById('bigimage').src=this.src />
0
 

Author Comment

by:jessyj
ID: 39293774
Hi skullnobrains. Thank you!
Regarding enlarging the single image, it is not a problem. But how to fix the code below which has programmed 99% based on my attached image. The only problem now is the enlarging image doesn't work and I can only get the first image working (zoom in). Could someone help? How to fix the following code to zoom in the each image accordingly. Thank you!

<!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" xml:lang="en-us">
<head>
<title>jCarousel </title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
 
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
 
<script type="text/javascript">
 
var mycarousel_itemList = [
    {url: "images/1.jpg", title: ""},
    {url: "images/2.jpg", title: ""},
    {url: "images/3.jpg", title: ""},
    {url: "images/4.jpg", title: ""}
   
];
 
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
 
        if (i > mycarousel_itemList.length) {
            break;
        }
 
        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
     
        carousel.add(i, item);
    }
};
 
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
   return '<a href="' + url_m + '" title="' + item.title + '"'+
' onMouseOver="showIt(this)"' +
' onClick="return showIt(this)"><img src="' + item.url + '"  width="75" height="75" border="0" alt="' + item.title + '"  /></a>';};
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
function showIt(link) {
  document.getElementById('img').innerHTML='<img src="'+link.href+'" />'
  document.getElementById('imgTitle').innerHTML=link.title
  return false;
}
 
</script>
 
</head>
<body>
<div>
<div id="img" style="height:300px; width: 300px; border: 1px solid gray;"><img src="images/1.jpg" /></div>
<span id="imgTitle"></span>
<div id="wrap">
   
  <ul id="mycarousel" class="jcarousel-skin-ie7">
   
  </ul>
 
</div>
</div>
test
</body>
</html>
0
 
LVL 26

Expert Comment

by:skullnobrains
ID: 39296715
sorry but

- i do not understand most of what you wrote. i mean the english part, not the code and specifically this : "which has programmed 99% based on my attached image"

- i downloaded the version of jquery you are using and the jcarousel i found here : http://sorgalla.com/projects/jcarousel/ which is not the same one as yours, and in which the basics do not work

i have no time to try all the jcarousel versions around. give an url or enough information so i can debug in a reasonable amount of time IE not spent hours just to setup the environment and/or guess about the libraries you are using.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:jessyj
ID: 39301176
Hi expert. Thank you! How to add the hyperlink to the title? e.g. when the the first image is displayed as title, it will be linked to another image.  Thank you!
var mycarousel_itemList = [
    {url: "images/1.jpg", title: "the first image"},
    {url: "images/2.jpg", title: "the second image"},
    {url: "images/3.jpg", title: "the third image"},
    {url: "images/4.jpg", title: "the fourth image"}
   
];
0
 
LVL 26

Expert Comment

by:skullnobrains
ID: 39301733
i really cannot help you along this line :

you need to provide a link where people can try the code

and/or

you need to make yourself clear

"add the hyperlink to the title" -> THE ? which one
"the first image is displayed as title" -> how would you display an image as a title ?
"it will be linked to another image" -> IT (the image) will be linked to another image ?

try something like
"i'm in such a situation, i click on this item, i want this to happen"

maybe some people can do better than i can, but i cannot figure out what you want. it's a pitty because the code is rather trivial
0
 

Author Comment

by:jessyj
ID: 39372742
I've requested that this question be deleted for the following reason:

Resolve it myself
0
 
LVL 26

Expert Comment

by:skullnobrains
ID: 39372743
i do not care about points, but may i dare point out the following

- your question did not mention carousel, titles, extra-links, or your own code, and is actually answered by the 2 lines of code in my very first post

- EE allows you to post an answer and accept your own answers. if you resolved it yourself, would you kindly share the answer so others can make good use of it ?
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 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

11 Experts available now in Live!

Get 1:1 Help Now