צפייה בתמונות מוגדלות באמצעות Cloud Zoom

ב-05.30.10, ב-כלים חינמיים, כללי, ע"י יוסי ג'אנה

Cloud Zoom הוא תוסף שנבנה על-ידי ספריית jQuery שמגיע עם תכונות מרשימות. התוסף שוקל 6kb מה שמבטיח טעינה מהירה בכל אתר ודפדפן בעולם. צפייה בתמונות הפך לפעילות הנפוצה ביותר באינטרנט. רוב הגולשים באינטרנט עוסקים בצפייה בתמונות על בסיס יום יומי, בין אם זה ברשתות חברתיות או באתרים כאלה ואחרים. כפי שניתן לומר, תמונה אחת שווה אלף מילים, באינטרנט זה שווה kמיליון. צפייה בתמונות מוגדות באמצעות Cloud Zoom מומלצת עבור אתרים שרוצים להציג תמונה חדה יותר לגולשיו ולתת לגולש אפשרות צפייה מוגדלת של תמונות ועדיין להשאיר אותם מיוחדים.

צפייה בתמונות מוגדלות באמצעות Cloud Zoop

התוסף מציג את גרסת התמונה המוגדלת באותו הדף.
אם נעבור על התמונה, תוצג לנו גרסתו המוגדלת ללא צורך בפתיחת חלון חדש בדפדפן.

התוסף עובד כתוסף לגלריית תמונות מה שמציג באופן אוטומטי את רשימת התמונות, וכאשר מתבצע הקלקה עליו הוא מציג את תמונה המוגדלת באותו חלון. התוסף מומלץ עבור בעלי אתרים שרוצים להציג תמונות של המוצרים שלהם באופן פשוט ומרשים.

התוסף ניתן לעריכה והגדרה לצרכים המדויקים שלך באתר. ניתן לעצב את התוסף לצפייה בתמונות באמצעות Css באופן פשוט וקל.

אתר הרשמי: http://www.professorcloud.com/mainsite/cloud-zoom.htm
דוגמה מקומית: CoudZoom
הורדה: לחץ כאן

איך להתקין תוסף לצפייה בתמונות מוגדלות באמצעות Cloud Zoom

נא לפתוח קובץ html חדש
נא לרשום את קוד הבא בתוכו:

<html>
<head>
 
 
</head>
 
    <body>
    <!-- Load the Cloud Zoom CSS file -->
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
 
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="http://www.professorcloud.com/js/cloud-zoom.1.0.1.min.js"></script>
 
 
        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->
 
        <a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="http://www.professorcloud.com/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>
 
 
        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->
    </body>
</html>

נא לשמור את הקובץ ולהפעיל אותה בדפדפן.

עד כאן, מדריך פשוט להתקנת תוסף לצפייה בתמונות מוגדלות באמצעות Cloud Zoom.

מאמרים נוספים:

בניית גלריית תמונות בוורדפרס

במידה וחשבת לבנות גלריית תמונות בוורדפרס בטוח ...

טוויטר וציוצים ישירות מהאתר - Like It? Tweet It

כל מי שעוסק בשווק באינטרנט יודע שאחד הפלאטפורמ ...

תוספים לוורדפרס - 6 גלריות תמונות

קשה למצאו גלריית תמונות נורמליות שאפשר לכלול ו ...

גלריית תמונות חינם - Galleriffic

במידה וחיפשתם או חשבתם לבנות גלריית תמונות באת ...

יוסי ג'אנה

בן 25: וובמסטר מוסמך מטעם ג'ון ברייס, מתכנת Php מוסמך מטעם מכללת Ness, מוסמך גוגל אנליטיקס מטעם ( Google), בעל ניסיון של 3 שנים בתחום האינטרנט. עוסק בניהול פרויקטים, בניית אתרים, קידום אתרים ושווק באינטרנט משנת 2007. מקיים שיעורים והדרכות בנושאים אלו. שותף ומנהל פרויקטים בחברת iDox. אוהב לשתף את הידע בתחומים אלו ולעזור לאנשים שרק מתחילים את דרכם בתחום השווק באינטרנט. אוהב ללמוד וללמד.

בקרו באתר המחבר | כל המאמרים ממחבר