change to spanish
The download file comes in ZIP format, in it, an HTML called 'abcshow.html' and a folder 'abcshow_1.02' with all the library files: one javascript 'ABCshow.js', one CSS 'ABCshow.css' and two folders, 'img' (library images) and 'images' (sample photos).
1.1 - Include in the header of your document the "ABCshow.js".
<script type="text/javascript" src="abcshow_1.02/ABCshow.js"></script>
1.2 - Include the style sheet "ABCshow.css" (or add the ABCshow styles inbetween the already existant styles).
<link rel="stylesheet" href="abcshow_1.02/ABCshow.css" type="text/css" media="screen" />
1.3 - These images should be located inside the "img" folder, following the specific order shown in 'ABCshow.js' file. These images should be located inside the "img" folder, following the specific order shown in "ABCshow.js" file.
2.1 - Be sure all the links of the images you're willing to include in the gallery contain the attribute rel="abcshow".
<a href="images/image-1.jpg" rel="abcshow" title="Título de la imagen" class="abc"><img src="images/image.jpg" alt="" /></a>
2.2 - If you want these images inside a category or group, add the name of that category between square brackets.
<a href="images/image-1.jpg" rel="abcshow[namegroup]" title="Título de la imagen" class="abc">image #1</a>
2.3 - All the links must include attribute class="abc".
<a href="images/image-1.jpg" rel="abcshow" title="Título de la imagen" class="abc"><img src="images/image.jpg" alt="" /></a>
3.1 - The href's link must have the absolute URL of YOUtube's embed, including the video code (We can get this in the 'Add Video' option below every video at Youtube).
<a href="http://www.youtube.com/embed/Lbgbslrf5LU" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://img.youtube.com/vi/Lbgbslrf5LU/1.jpg" /></a>
3.2 - Every link must have the attribute rel="abcvideo[300|200]", specifying video height and width.
<a href="http://www.youtube.com/embed/Lbgbslrf5LU" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://img.youtube.com/vi/Lbgbslrf5LU/1.jpg" /></a>
3.3 - Every link must have the attribute class="abc".
<a href="http://www.youtube.com/embed/Lbgbslrf5LU" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://img.youtube.com/vi/Lbgbslrf5LU/1.jpg" /></a>
3.4 - In order to show a thumbnail (small image), of a video frame, simply add at the image "src" the red colored URL with the correct video code.
<a href="http://www.youtube.com/embed/Lbgbslrf5LU" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://img.youtube.com/vi/Lbgbslrf5LU/1.jpg" /></a>
4.1 - The href's link must have the absolute URL of Vimeo's embed, including the video code.
<a http://player.vimeo.com/video/29193046" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://b.vimeocdn.com/ts/236/084/236084241_100.jpg" /></a>
4.2 - Every link must have the attribute rel="abcvideo[300|200]", specifying video height and width.
<a href="http://player.vimeo.com/video/29193046" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://b.vimeocdn.com/ts/236/084/236084241_100.jpg" /></a>
4.3 - Every link must have the attribute class="abc".
<a href="http://player.vimeo.com/video/29193046" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://b.vimeocdn.com/ts/236/084/236084241_100.jpg" /></a>
4.4 - In order to show a thumbnail (small image), of a video frame, with your video code you should go to Vimeo thumbnail generator and get a size thumbnail (small, medium, large)
<a http://player.vimeo.com/video/29193046" title="Título del video" rel="abcvideo[300|200]" class="abc">
<img src="http://b.vimeocdn.com/ts/236/084/236084241_100.jpg" /></a>
ABCshow its a free to use library created by Ricardo Castillo, ABCdisegno.com CEO (Spanish speaking Design, programming and creativity community), this library allows you to enhance images at first sight, as well as YouTube and Viemo videos. It's ideal for a picture gallery, or to zoom in particular images, like a news related shot. Also allows the same with videos from YouTube; just by knowing the reference code of each video, you can show small captures of it, and place them at first hand with any size you choose!.
The main feature of this library is the lack of need of frameworks for its work, for that, you will only have to include a single one javascript file in page's header. Its other fortress resides in the crossbrowser capacity, working even in older browsers, such as Internet Explorer 5.5 and 6.0
Its also possible to group images and videos in categories, allowing to navigate them with clicks or using keyboard's arrows.
Another of its particular features is having the option to show the loaded thumbs with a fade effect. This is achieved by simply adding the attribute class="abc". at the links.
Now help us to improove this library and add new functionalities for the future, send us your suggestions and donate if you feel so.
First download and inspect the sample provided by us, then try to replicate each step explained HERE.
First check that you're including the "ABCshow.js" file. If it's added, be sure all the links have the attrib rel="abcshow".
<script type="text/javascript" src="abcshow_1.02/ABCshow.js"></script>
<a href="images/image-1.jpg" rel="abcshow" title="Título de la imagen o video" class="abc">
<img src="images/image.jpg" alt="" /></a>
First check that you're including the "ABCshow.js" file. If it's added, be sure all the links have the attrib rel="abcvideo[300|200]".
<script type="text/javascript" src="abcshow_1.02/ABCshow.js"></script>
<a href="images/image-1.jpg" rel="abcvideo[300|200]" title="Título de la imagen o video" class="abc">
<img src="images/image.jpg" alt="" /></a>
The script will work once the 'body' of the page its fully loaded.
Be sure that you're including the "ABCshow.css" styles sheet at the page's header. This one has to be included above (before) the javascript file.
<link rel="stylesheet" href="abcshow_1.02/ABCshow.css" type="text/css" media="screen" />
Yes you can, simply remove the attribute class="abc" from the image links that you don't want to show with fade in effect.
Yes you can, but you must substitute the special characters of each for their respective entities, here you have an example:
<a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">
<img src="images/image.jpg" alt="" /></a>
NO, all the links MUST be in the page's body if you want to see the enhanced effects.
Not for now, but may be in a near future.
Yes, this library has CCA 2.5 licence. If you wish, you can make us donation to motivate us in the process of improving this library.
If you found this library usefull, you can consider making a donation, it's very welcome and will motivate us in the process of improving and enhancing our humble proyect, as well as creating new ones! ;)