ورود

View Full Version : سوال: ایجاد نمایش بصورت لایت باکس



iman_k26
چهارشنبه 28 خرداد 1393, 17:32 عصر
با سلام

دوستان یه سوالی داشتم ممنون میشم راهنمایی کنید:

از من خواسته شده برای یه سایتی که یسری نمایندگی توی شهرهای مختلفی داره یه قسمت ایجاد کنم که توی اون قسمت یه عکس نقشه ایران رو نشون بده و وقتی کاربر روی هر کدوم از استان های اون نقشه کلیک میکنه بصورت لایت باکس نمایندگی های اون شهر و کلا مشخصات نمایندگیهاش نشون داده بشه...

حالا میخواستم ببینم چجوری باید این کار رو انجام بدم. از کجا شروع کنم، نقشه رو چجوری تقسیم بندی کنم و ... در کل اگر آموزشی هم در این زمینه هست ممنون میشم لینک بدید

با تشکر

iman_k26
چهارشنبه 04 تیر 1393, 18:19 عصر
دوستان من یه نقشه ایران رو تو نرم افزار دریمویور با تگ map بخش بندی کردم و کاراش رو انجام دادم
حالا من میخوام وقتی روی هر شهر کاربر کلیک میکنه نمایندگی های اون شهر که بصورت عکس ذخیره کردم نمایش داده بشه..
اگر بخوام این لایت باکس رو براش قرار بدم چیکار باید کنم؟( مراحلی که گفته شده توسط خودش رو انجام دادم اما کار نکرد ممنون میشم اساتید باز هم راهنمایی کنند
کلا چجوری باید بزارمش و کجا باید کداش رو بزارم...

ممنون میشم راهنمایی کنید

https://github.com/j...tershaw/litebox (https://github.com/joemottershaw/litebox)

dreadful
چهارشنبه 04 تیر 1393, 20:15 عصر
اینو ببین (http://barnamenevis.org/showthread.php?447455-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%86%D9%82%D8%B4%D9%87-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86-%D8%A8%D8%A7-%D9%81%D8%B1%D9%85%D8%AA-SVG-%D9%88-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88&highlight=svg)
این svg ایرانه که دوست عزیزمون ،میزاری توی سایتت ،روی هر یک از path هاش یه کلاس میدی (شایدم داشت!) ،اسکریپت براش مینویسی که روش کلیک شد یه عمل انجام که اون عمل میشه که یه عکس رو نشون بده
موفق باشی





+ عکس پروفایلت خیلی خوبه :))))))

دانیال دزفولی
چهارشنبه 04 تیر 1393, 21:33 عصر
توی همون لینک دمو هم گذاشته

http://www.cloud-eight.com/github/litebox/

mohamad_torabi
چهارشنبه 04 تیر 1393, 21:39 عصر
بهتر با fancybox این کار رو انجام بدی اموزش در لینک زیر
http://barnamenevis.org/showthread.php?452596-%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%DB%8C-%D8%A7%D8%B2-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-fancyBox

iman_k26
چهارشنبه 04 تیر 1393, 22:19 عصر
اینو ببین (http://barnamenevis.org/showthread.php?447455-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%86%D9%82%D8%B4%D9%87-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86-%D8%A8%D8%A7-%D9%81%D8%B1%D9%85%D8%AA-SVG-%D9%88-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D 9%88&highlight=svg)
این svg ایرانه که دوست عزیزمون ،میزاری توی سایتت ،روی هر یک از path هاش یه کلاس میدی (شایدم داشت!) ،اسکریپت براش مینویسی که روش کلیک شد یه عمل انجام که اون عمل میشه که یه عکس رو نشون بده
موفق باشی





+ عکس پروفایلت خیلی خوبه :))))))

ممنون از راهنمایی که کردید اما عکس پروفایل خنده داره؟؟؟!!

iman_k26
چهارشنبه 04 تیر 1393, 22:20 عصر
توی همون لینک دمو هم گذاشته

http://www.cloud-eight.com/github/litebox/

خودم میدونستم دمو داره سوال چیزه دیگه ای بود...:چشمک:

iman_k26
چهارشنبه 04 تیر 1393, 22:21 عصر
بهتر با fancybox این کار رو انجام بدی اموزش در لینک زیر
http://barnamenevis.org/showthread.php?452596-%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%DB%8C-%D8%A7%D8%B2-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-fancyBox

ممنون از راهنماییتون امیدوارم مشکل حل بشه اگه نشد باز مزاحم میشم...

iman_k26
چهارشنبه 04 تیر 1393, 23:03 عصر
دوستان یه نگاه به این بندازید ببینید کجا مشکل داره و چیکار باید کنم ممنون میشم:

<!doctype html><html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/litebox.css" />
<link rel="stylesheet" type="text/css" href="css/style.min.css" />
<script type="text/javascript" src="js/images-loaded.min.js"></script>
<script type="text/javascript" src="js/litebox.js"></script>


<title>Iran Flag</title>
<script>
$('.litebox').liteBox({
revealSpeed: 400,
background: 'rgba(0,0,0,.8)',
overlayClose: true,
escKey: true,
navKey: true,
callbackInit: function() {},
callbackBeforeOpen: function() {},
callbackAfterOpen: function() {},
callbackBeforeClose: function() {},
callbackAfterClose: function() {},
callbackError: function() {},
callbackPrev: function() {},
callbackNext: function() {},
errorMessage: 'Error loading content.'
});
</script>
</head>


<body>
<div class="litebox">
<img class="litebox" src="images/map-iran3.jpg" alt="" width="800" height="714" usemap="#Iran"/>
<map name="Iran" >
<area shape="poly" coords="318,181,317,196,336,196,349,189,356,192,345,215,32 2,205,323,220,303,217,297,203,292,218,295,210,290, 208" href="images/Tehran.jpg" alt="Tehran">

<area shape="poly" coords="278,170,304,177,307,188,289,198,261,204,262,198" href="images/Alborz.jpg" alt="Alborz">
<area shape="poly" coords="306,266,453,267,435,303,357,339,356,379,313,369,27 5,309" href="images/Esfehan.jpg" alt="Esfehan">
<area shape="poly" coords="342,244,482,245,505,161,416,172" href="images/Semnan.jpg" alt="Semnan">
<area shape="poly" coords="309,450,367,425,450,542,369,563" href="images/Fars.jpg" alt="Fars">
<area shape="circle" coords="540,457,69" href="images/Kerman.jpg" alt="Kerman">
<area shape="poly" coords="616,406,483,294,531,255,658,303" href="images/Khorasan-jonobi.jpg" alt="Khorasan jonobi
">
<area shape="poly" coords="379,340,462,313,497,366,402,418" href="images/Yazd.jpg" alt="Yazd">
<area shape="poly" coords="616,635,639,436,727,553,691,660" href="images/Sistan&balochestan.jpg" alt="Sistan &amp; Balochestan">
<area shape="poly" coords="490,530,606,654,552,623,460,577" href="images/Hormozgan.jpg" alt="Hormozgan">
<area shape="poly" coords="300,481,347,556,317,559,270,467" href="images/Boshehr.jpg" alt="Boshehr">
<area shape="poly" coords="181,348,238,355,246,440,188,434" href="images/Khozestan.jpg" alt="Khozestan">
<area shape="poly" coords="530,161,680,168,653,260,559,230" href="images/Khorasan-razavi.jpg" alt="Khorasan-Razavi">
<area shape="poly" coords="516,87,568,114,547,138,499,129" href="images/Khorasan-shomali.jpg" alt="Khorasan-Shomali">
<area shape="poly" coords="417,133,470,92,487,114,425,153" href="images/Golestan.jpg" alt="Golestan">
<area shape="poly" coords="291,150,387,148,393,177,321,183" href="images/Mazandaran.jpg" alt="Mazandaran">
<area shape="poly" coords="210,95,261,135,246,150,206,118" href="images/Gilan.jpg" alt="Gilan">
<area shape="poly" coords="320,233,286,229,274,255,289,263" href="images/Qom.jpg" alt="Ghom">
<area shape="poly" coords="269,164,228,161,227,196,254,199" href="images/Ghazvin.jpg" alt="Ghazvin">
<area shape="poly" coords="223,282,235,215,252,212,257,283" href="images/Markazi.jpg" alt="Markazi">
<area shape="poly" coords="226,216,186,206,183,255,198,264" href="images/Hamedan.jpg" alt="Hamedan">
<area shape="poly" coords="265,401,297,416,282,454" href="images/Koh-boyerahmad.jpg" alt="K&amp;Boyer Ahmad">
<area shape="poly" coords="278,342,294,399,250,344" href="images/Ch&Bakhtiyari.jpg" alt="Ch-Bakhtiyari">
<area shape="poly" coords="165,269,232,302,224,322,155,308" href="images/Lorestan.jpg" alt="Lorestan">
<area shape="poly" coords="110,281,98,292,161,359,166,330" href="images/Ilam.jpg" alt="Ilam">
<area shape="poly" coords="161,248,80,278,101,232" href="images/Kermanshah.jpg" alt="Kermanshah">
<area shape="poly" coords="165,178,107,178,108,208,157,220" href="images/Kordestan.jpg" alt="Kordestan">
<area shape="poly" coords="210,141,160,142,197,193" href="images/Zanjan.jpg" alt="Zanjan">
<area shape="poly" coords="189,116,161,39,196,77" href="images/Ardabil.jpg" alt="Ardebil">
<area shape="poly" coords="137,51,85,64,102,129,165,110" href="images/A.sharghi.jpg" target="_self" alt="Azarbayejan-Sharghi">
<area shape="poly" coords="61,41,86,159,48,126,31,50" href="images/A.gharbi.jpg" alt="Azarbayejan-Gharbi">
</map>
</div>
</body>
</html>