Very beautiful album collection using jquery to make albums _jquery

One, simple image tumbling

Image-rollover are often used in interactive navigation bars, and when our mouse moves to the navigation bar, the appearance of the button changes. For example, we use the following black and white thumbnails as the navigation chart, when the mouse moves to the specified icon, the icon becomes a bright color picture. The preview is as follows:

The code for this page is very simple, and we use this as an example to gradually achieve the rollover:

Img-rollover.html

<!
DOCTYPE html>  

This code is very simple. The main thing is to include a logo section, a title and 6 <a> links. In the middle we omitted the jquery Code section in line 38, where we gradually added code to achieve the rollover effect.

1, change the SRC attribute of the image

We know that every image displayed on a Web page has a SRC attribute that represents the path to a file that points to a picture on the server. If we change the value of this property, the browser will display a new picture. For the above code, we can first get the traversal of all IMG elements through the each () function, and add the following code in the corresponding position:

<script>
 $ (document). Ready (function () {
  $ (' #gallery img '). each ();
 }); /end Ready
</script>

We can get the SRC attribute of img through the ARRT () method of jquery. We then replace the SRC attribute value above with the path to the new picture, as follows:

<script>
 $ (document). Ready (function () {
  $ (' #gallery img '). each (the function () {
   var oldsrc = $ (this). attr (' src ');
   var newpic = new Image ();
   var imgext =/(\.\w{3,4}$)/;
   NEWPIC.SRC = Oldsrc.replace (Imgext, ' _h$1 ');
  });
 /end Ready
</script>

The following image preload will have a simple analysis of this code, here First review, the attr () function allows you to read the specified HTML attribute value of a tag, such as the "src" parameter passed in in the example above, which reads the SRC attribute of the picture. If you pass the second argument to the attr () method, you can reset the value of the property. Like what:

$ (' #pic1 '). attr (' src ', ' images/newimg.jpg ');

In addition, the attr () function allows us to modify more than one HTML property value at a time. For example, when we need to load the newimg and oldimg size mismatch, in order to avoid the new image distortion, we can simultaneously change the IMG element's width, high properties. The following method is used to pass an object direct amount as an argument:

var newimg = new Image ();
NEWIMG.SRC = ' images/newimage.jpg ';
$ (' #pic1 '). attr ({
  src:newImg.src,
  width:newImg.width,
  height:newImg.height
});

2. Pre-loading image

If we do not add "scheming" in the mouse to move to the specified picture to change the SRC properties of the image to achieve image-rollover, there will be a small problem. When we move the mouse to the specified icon, the SRC attribute of the image is changed, the browser will go to the new src path to download the resource picture, the scene download pictures often give users a noticeable sense of delay. To overcome this annoying problem, we can download the picture to the browser's cache in advance.

In fact, in code 2, we implement the preload of the picture. Line 4th in code 2, first get the src attribute of each picture; line 5th creates a new image; line 6th to 7th, using regular expressions, add _h to the newly created image at the end of the old image src. For example, the old picture src is ' images/blue.jpg ' and assigns ' images/blue_h.jpg ' to the SRC attribute of the newly created newpic.

Code execution to ' NEWPIC.SRC = Oldsrc.replace (Imgext, ' _h$1 '); , the browser will go to the specified src to download the new picture and put it in the browser cache. The mouse event has not been triggered at this point, and we have downloaded the desired image by downloading it at the beginning of the script.

3, add hover () event implementation image rollover

After completing the image preload, the next step is to add a hover event to the picture that needs to roll. When the mouse moves to the specified picture, the picture becomes gorgeous color, moving back to black and white. We add the following code 2 based on:

 $ (document). Ready (function () {
  $ (' #gallery img '). each (the function () {
   var oldsrc = $ (this). attr (' src ');
   var newpic = new Image ();
   var imgext =/(\.\w{3,4}$)/;
   NEWPIC.SRC = Oldsrc.replace (Imgext, ' _h$1 ');
   $ (this). Hover (
    function () {
     $ (a). attr (' src ', newpic.src);
    },
    function () {
     $ (this). attr (' src ', oldsrc);
    }
   ; /end hover
  });
 /end Ready

The code is very simple, but in the 7~14 line through this to the current picture to add a hover event, the mouse moved to change the picture of SRC. At this point, save the added img-rollover.html, and note that the js/jquery-1.7.2.min.js and picture resources that you want to include are placed intact according to the path specified in your code. When you are done, you can test the rollover effect of the picture navigation picture as you would a preview picture.

Two, the beautiful album Collection

After the rollover of the image, we wanted to go further and, when we clicked on the small thumbnail, we were able to show the larger image of the picture, like a photo album that could be looked over. The preview is as follows:

Next, we implement the small figure tumbling Code 1 on the basis of the album set to add functionality.

1, why to put the IMG in the link

Some people may not understand why the IMG is included in the <a> link separately. In fact, this is a kind of undisturbed JavaScript technology, if your browser shut down JavaScript, where the image is included in a link, when the user clicks on the small map, the same will access to the large image file. Just by linking, clicking the link exits the current web page and loads the large image file according to the link. As shown in the following illustration:

These are prepared for users who have closed JavaScript. In general, however, for visitors using JS, we want to click on a small thumbnail to render the larger image of the graph on the page instead of linking to another page. In general, clicking a link causes the Web browser to load the content that the link points to, so the first step here is to prevent the browser from jumping to the page when the link to the picture is clicked. We use the Preventdefault () method of the event to block the normal behavior of the event, adding the following code:

 $ (document). Ready (function () {
  ...//omitted unchanged part

  $ (' #gallery a '). Click (function (evt) {
   Evt.preventdefault ( );
  });/ /end Click

 });//end ready

The added code adds a Click event for the link, and the Preventdefault () method of the event blocks the general behavior of the event when the link is clicked. At this point we click on the page of the picture link, the browser will not jump to the big picture page. Of course, browsers without JavaScript still implement jumps, because the shutdown is done through JavaScript.

2, click the thumbnail in the page to show a large image

To show the big picture, we add a div with ID bigimg on the above code, such as code 4, line 9th:

<div id= "Gallery" > <a href= "images/blue.jpg" ></a> 
 <a href= "images/green.jpg" ></a> 
 <a href= "images/orange.jpg" ></a> 
 <a href= "images/purple.jpg" ></a> <a href= "images/red.jpg" ></a> 
 <a href= "images/yellow.jpg" ></a>
</div>
<div id= "Bigimg" ><div>

Next, we create an IMG tag for the larger image to be displayed through jquery, adding the following code in code 3:

  .../omit unchanged part

  $ (' #gallery a '). Click (function (evt) {
   evt.preventdefault ();
   var Imgpath = $ (this). attr (' href ');
   var newimg = $ ('  ');
   Newimg.hide ();
   $ (' #bigImg '). prepend (newimg);
   Newimg.fadein (1000);
  }; /end Click

In line 5th of code 5, first get the href attribute of <a> through the attr () function, that is, the link address Imgpath, line 6th creates an IMG tag based on the connection address, assigns the SRC attribute of the label to Imgpath, and the first line, hides the picture, The back will appear gorgeous by fading in; line 8th will add an IMG tag to <div id= "Bigimg" ></div>, and if there is no hidden operation on line 7th, the image appears immediately; Row 9th, the image is displayed in fading mode. OK, save the Code, open in the browser, click on the thumbnail, found that there is a photo album to view the effect, but, when we continue to click on the album picture, the history of the picture does not disappear, if we have been clicked on, the picture will be listed. As shown in the following illustration:

In fact, whenever we click on a thumbnail, the code creates a new IMG for us and adds it to the <div id= "Bigimg" ></div>, which, from the DOM's point of view, keeps adding child nodes:

In order to achieve the "album" Browsing effect, we will display a new photo at the same time to delete the previous picture. Continue to add the following in code 5:

  .../omit unchanged part

  $ (' #gallery a '). Click (function (evt) {
   evt.preventdefault ();
   var Imgpath = $ (this). attr (' href ');
   var oldimg = $ (' #bigImg img ');
   var newimg = $ ('  ');
   Newimg.hide ();
   $ (' #bigImg '). prepend (newimg);
   Newimg.fadein (1000);
   Oldimg.fadeout (1000, function () {
    $ (this). Remove ();
   });
  }; /end Click

Line 6th first gets the current existing image oldimg, which should fade out when the new picture fades in. 11~13 Line, after the new picture fades in, the oldimg fades out. A callback function is passed to the Fadeout function to remove the IMG tag of the image after oldimg fades out. This ensures that the <div id= "Bigimg" in the DOM tree will always have only one IMG node and not grow indefinitely.

Next to the details of the adjustment, when we click on this page, we want to display the first image by default, in order to achieve this small function, we only need to add code 6 after a line of code:

  .../omit unchanged part

  $ (' #gallery a '). Click (function (evt) {
   evt.preventdefault ();
   var Imgpath = $ (this). attr (' href ');
   var oldimg = $ (' #bigImg img ');
   var newimg = $ ('  ');
   Newimg.hide ();
   $ (' #bigImg '). prepend (newimg);
   Newimg.fadein (1000);
   Oldimg.fadeout (1000, function () {
    $ (this). Remove ();
   });
  }; /end Click

  $ (' #gallery a:first '). Click ();

We added $ (' #gallery A:first ') in the back. Click (), in jquery, if no arguments are passed to the event function, jquery triggers the event once. Save the code, open it again in the browser, and the first picture is displayed by default:

3, CSS absolute positioning to achieve image overlap

The beautiful album is basically finished, but look at it, when we replace the photos we want to see, the fading out of the old picture will be completed in the back of the new map, giving people a feeling of superfluous disadvantage:

To solve this problem, we let the new diagram fade in and out of the old image. In order to achieve the image overlap display we need to use the absolute positioning of CSS.

In general, when hiding or adding a new element, other elements will automatically move like a stream to fill gaps or to place new elements. But like our example in this article, if we don't want to see this effect, we can use the absolute positioning of CSS. The absolute positioning of the CSS will place an element outside the regular page content stream, so that there is no action in the content flow to fill the movement. If we use absolute positioning to position elements in the same position, then the elements will overlap. In this case, that's exactly what we want. Implementation is really very simple, just want in the CSS in the <div id= "Bigimg" ></div> in the IMG specified as absolute positioning on it. We add the following code before </style> in code 1:

#bigImg img {
  position:absolute;
}

Save, reopen with browser, done! The beautiful album is ready.

jquery File Downloads

The above is the entire content of this article, I hope to learn from the jquery program to help.