Poszukiwana modyfikacja

**RafoX** · 3 Października 2014

Hej,

Szukam modyfikacji podobnej do tej co jest na http://www.4clubbers.com.pl/

a mianowicie tej:

Chodzi o tą mapkę aby można było na niej wybrać wybrane województwo a ono przeniosło by mnie do odpowiedniego forum.

Chcę stworzyć na tej zasadzie jak oni stworzyli listę klubów i dyskotek to ja serwisów naprawczych z dziedziny RTV.

Znajdę coś gotowego czy jednak muszę zlecić napisanie takiego czegoś?

Ew. kto by chciał coś takiego wykonać no i za ile

DawPi · 3 Października 2014

Zlecić. Robiłem kiedyś takie coś dla Francji, ale z gotowym kodem - w sumie chyba prościej znaleźć takie coś i dostosować pod siebie.

**JamLasica** · 3 Października 2014

http://www.krksmg.pl/mapka/

http://winstonwolf.pl/clickable-maps/poland.html

Edytowane 3 Października 2014 przez JamLasica

**RafoX** · 3 Października 2014

Dzięki za skrypt fajnie się to prezentuje jednak coś nie chce mi działać...

do globalTemplate

w sekcji <head>

dodałem :

<link rel="stylesheet" type="text/css" media="screen,projection" href="pl-mapa-500px.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="pl-mapa.js"></script>

Oraz przy tworzeniu nowego forum jako opis :

<div id="map-pl">
  <ul id="polska">
   <li id="pl1"><a href="#dolnoslaskie">Dolnośląskie</a></li>
   <li id="pl2"><a href="#kujawsko-pomorskie">Kujawsko-pomorskie</a></li>
   <li id="pl3"><a href="#lubelskie">Lubelskie</a></li>
   <li id="pl4"><a href="#lubuskie">Lubuskie</a></li>
   <li id="pl5"><a href="#lodzkie">Łódzkie</a></li>
   <li id="pl6"><a href="#malopolskie">Małopolskie</a></li>
   <li id="pl7"><a href="#mazowieckie">Mazowieckie</a></li>
   <li id="pl8"><a href="#opolskie">Opolskie</a></li>
   <li id="pl9"><a href="#podkarpackie">Podkarpackie</a></li>
   <li id="pl10"><a href="#podlaskie">Podlaskie</a></li>
   <li id="pl11"><a href="#pomorskie">Pomorskie</a></li>
   <li id="pl12"><a href="#slaskie">Śląskie</a></li>
   <li id="pl13"><a href="#swietokrzyskie">Świętokrzyskie</a></li>
   <li id="pl14"><a href="#warminsko-mazurskie">Warmińsko-mazurskie</a></li>
   <li id="pl15"><a href="#wielkopolskie">Wielkopolskie</a></li>
   <li id="pl16"><a href="#zachodniopomorskie">Zachodniopomorskie</a></li>
  </ul>
 </div>

no i klapa;/

Edytowane 3 Października 2014 przez RafoX

Macsch15 · 3 Października 2014

Najpierw to: http://api.jquery.com/jquery.noconflict/

**RafoX** · 3 Października 2014

Najpierw to: http://api.jquery.com/jquery.noconflict/

Zbyt wiele mi to nie mówi, rozwiń swoją myśl.

Macsch15 · 3 Października 2014

IPB korzysta z prototype.js które może się gryźć z jquery (które jest używane przez mapę) dlatego używamy brzydkiego hacka jakim jest jQuery.noConflict().

Przykłady użycia masz podane na stronie.

DawPi · 3 Października 2014

Plik pl-mapa.js jak rozumiem wysłany na FTP?

**RafoX** · 3 Października 2014

Plik pl-mapa.js jak rozumiem wysłany na FTP?

zgadza się z taką zawartością :

$(function($) {

  var mapUrl = 'http://www.krksmg.pl/mapka/pl-500px.png';	/* ścieżka do pliku .png;
				   jeżeli mapa nie ładuje się poprawnie zamień na bezpośrednie odwołanie do pliku, np:
				   var mapUrl='http://example.com/map/pl-500px.png'; 
				   domyślnie ścieżka pobierana jest z pliku CSS, ale w niektórych przypadkach nie ładuje się prawidłowo */
  var loadingText = "Loading ..."; // tekst wyświetlany podczas ładowania mapy
  var loadingErrorText = "Brak mapy!"; // tekst błędu; wyświetlany, gdy nie został załadowany plik .png
  var tooltipArrowHeight = 6;	/* wysokość strzałki pod 'dymkiem' z nazwą regionu;
						   strzałkę możesz usunąć w pliku CSS, po usunięciu strzałki ustaw: var tooltipArrowHeight=0; */
  var visibleListId = '#map-widoczna-lista'; /* id div.a z widoczną listą regionów
    									  nie zapomnij o znaku hash (#)
    									  nie zapomnij zmienić id w pliku .css */
  var agentsListId = '#adresy';	/* id div.a z listą adresów/przedstawicieli
							   nie zapomnij o znaku hash (#)  */

  // TRYB WIELOKROTNEGO WYBORU (MULTIPLE-CLICK)
  var searchLink = 'szukaj.php'; // odnośnik do wyszukiwarki
  var searchLinkVar = 'wojewodztwo'; // zmienna przekazywana do skryptu wyszukiwarki
  var searchName = 'Szukaj'; // tekst odnośnika do wyszukiwarki


  $.multipleClickAction = function(e){
    var clickedRegions=[];
    $('#polska').find('.active-region').each(function(){ // szuka wybranych regionów (NIE EDYTUJ!)
       var url=$(this).children('a').attr('href'); // pobiera odnośniki wybranych regionów (NIE EDYTUJ!)

       // operacje na linkach

       var slicedUrl=url.slice(1); // domyślnie odcina hash (#) w odnośniku
       /* jeżeli użyjesz bezpiecznych odnośników, np: 'szukaj.php?wojewodztwo=mazowieckie'
          musisz 'odciąć' także parametry odnośnika:

          var slicedUrl=url.slice(url.indexOf('?')+13); // usuwa: '?wojewodztwo=' ... +13 to ilość odciętych znaków
       */

       // uzupełnia tablicę wybranymi regionami (NIE EDYTUJ!)
       clickedRegions.push(slicedUrl);
    });

    // tworzy odnośnik do wyszukiwarki wraz z zaznaczonymi regionami
    $('#search-link').attr('href',searchLink+'?'+searchLinkVar+'='+clickedRegions.join('|'));

   }

    // FUNKCJE STANDARDOWE
    // kliknięcie w region
    $.defaultClickAction = function(e) {
        // pobiera adres odnośnika klikniętego regionu (NIE EDYTUJ!)
        var url = $(e).children('a').attr('href'); 
        // domyślnie kliknięcie w region przenosi na stronę w odnośniku
        window.location.href = url;

        // wyświetla adres przedstawiciela w wybranym regionie
        $(agentsListId).find('li').hide();
        $(url+','+url+' li').show();
    }

    // ponowne kliknięcie w zaznaczony region
    $.doubleClickedRegion = function(e) {
        // domyślnie deaktywuje zaznaczony region
        $(e).removeClass('active-region');

        // ukrywa adresy przedstawicieli
        $(agentsListId).find('li').hide();
    }


/* --------------------------------------------------------
tutaj zaczyna sie mapa

NIE EDYTUJ! 

Polska, interaktywna mapa województw | http://winstonwolf.pl/clickable-maps/polska.html'>http://winstonwolf.pl/clickable-maps/polska.html
script version: 3.4 by Winston Wolf | http://winstonwolf.pl
Copyright (C) 2011 Winston_Wolf | All rights reserved


poważnie, NIE EDYTUJ TEGO! */
$('#map-pl').prepend('<span id="loader">'+loadingText+'</span>').addClass('script');$('#polska').find('a').hide();$(agentsListId).find('li').hide();if($('#map-pl').hasClass('multiple-click')){if(searchLink==''){var searchLink='search.php';}
if(searchLinkVar==''){var searchLinkVar='region';} if(searchName==''){var searchName='Search';} $('<a href="'+searchLink+'" id="search-link">'+searchName+'</a>').insertAfter('#polska');} if($('#map-pl').hasClass('widoczna-lista')){$('#map-pl').after('<div id="'+visibleListId.slice(1)+'"><ul></ul></div>');} if(mapUrl==''){var mapUrl=$('#polska').css('background-image').replace(/^url\("?([^\"\))]+)"?\)$/i,'$1');}
var mapImg=new Image();$(mapImg).load(function(){var countRegions=0;var clickedRegions=[];$('#loader').fadeOut();$('#polska').find('li').each(function(){var liid=$(this).attr('id');var url=$(this).children('a').attr('href');var code=null;var spans=0;countRegions++;switch(liid){case'pl6':case'pl8':case'pl13':case'pl16':spans=26;break;case'pl5':case'pl7':case'pl15':spans=47;break;default:spans=31;}
var tooltipLeft=$(this).children('a').outerWidth()/-2;var tooltipTop=$(this).children('a').outerHeight()*-1-tooltipArrowHeight;if($('#map-pl').hasClass('no-tooltip')){var tooltipTop=0;}
$(this).prepend('<span class="map" />').append('<span class="bg" />').attr('tabindex',countRegions);for(var i=1;i<spans;i++){$(this).find('.map').append('<span class="s'+i+'" />');}
$(this).children('a').css({'margin-left':tooltipLeft,'margin-top':tooltipTop});if($('#map-pl').hasClass('widoczna-lista')){var liHref=$(this).children('a').attr('href');var liText=$(this).children('a').text();$(visibleListId+' ul').append('<li class="'+liid+'"><a href="'+liHref+'">'+liText+'</a></li>');}
if($(this).children('a').hasClass('active-region')||url==window.location.hash){$(this).addClass('active-region focus');$(agentsListId).find('li').hide();$(url+','+url+' li').show();$('.'+$(this).attr('id')).children('a').addClass('active-region');$('#search-link').attr('href',searchLink+'?'+searchLinkVar+'='+url.slice(1));}}).hover(function(){$.MapHoveredRegion($(this));},function(){$.MapUnHoveredRegion($(this));}).focus(function(){$.MapHoveredRegion($(this));}).blur(function(){$.MapUnHoveredRegion($(this));}).keypress(function(e){code=(e.keyCode?e.keyCode:e.which);if(code==13)$.MapClickedRegion($(this));}).click(function(e){$.MapClickedRegion($(this));});if($('#map-pl').hasClass('widoczna-lista')){$(visibleListId).find('a').each(function(){var itemId='#'+$(this).parent().attr('class');$(this).hover(function(){$.MapHoveredRegion(itemId);},function(){$.MapUnHoveredRegion(itemId);}).focus(function(){$.MapHoveredRegion(itemId);}).blur(function(){$.MapUnHoveredRegion(itemId);}).keypress(function(e){code=(e.keyCode?e.keyCode:e.which);if(code==13)$.MapClickedRegion(itemId);}).click(function(e){$.MapClickedRegion(itemId);});});}}).error(function(){$('#loader').text(loadingErrorText);$('#polska').find('span').hide();$('#map-pl,#polska').css({'height':'auto','left':'0','margin':'0 auto'});}).attr('src',mapUrl);$.MapClickedRegion=function(e){var listItemId='.'+$(e).attr('id');if($('#map-pl').hasClass('multiple-click')){if($(e).hasClass('active-region')){$(e).removeClass('active-region');$(listItemId).children('a').removeClass('active-region');}else{$(e).addClass('active-region');$(listItemId).children('a').addClass('active-region');}
$.multipleClickAction(e);}else{if($(e).hasClass('active-region')){$.doubleClickedRegion(e);$(listItemId).children('a').removeClass('active-region');window.location.hash="";}else{$('#polska,'+visibleListId).find('.active-region').removeClass('active-region');$('#polska').find('.focus').removeClass('focus');if($(e).hasClass('active-region')){$(e).removeClass('active-region focus');$(listItemId).children('a').removeClass('active-region');}else{$(e).addClass('active-region focus').children('a').show();$(listItemId).children('a').addClass('active-region');}
$.defaultClickAction(e);}}}
$.MapHoveredRegion=function(e){$('#polska').find('.active-region').children('a').hide();$(e).children('a').show();$(e).addClass('focus');$('.'+$(e).attr('id')).children('a').addClass('focus');}
$.MapUnHoveredRegion=function(e){$(e).children('a').hide();if($(e).hasClass('active-region')==false){$(e).removeClass('focus');} $('.'+$(e).attr('id')).children('a').removeClass('focus');}
var loaderLeft=$('#loader').outerWidth()/-2;var loaderTop=$('#loader').outerHeight()/-2;$('#loader').css({'margin-left':loaderLeft,'margin-top':loaderTop});
// koniec mapy

});

Edytowane 3 Października 2014 przez RafoX

DawPi · 3 Października 2014

Jakieś błędy w konsoli JS w przeglądarce?

**RafoX** · 3 Października 2014

tylko taki :

[blocked] The page at 'https://unitrafan.pl/' was loaded over HTTPS, but ran insecure content from 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js': this content should also be loaded over HTTPS.

unitrafan.pl/:1

Uncaught ReferenceError: $ is not defined

**RafoX** · 9 Października 2014

nikt nic?

DawPi · 9 Października 2014

Generalnie to masz komplet informacji. Teraz się po prostu trzeba zawziąć i porobić wszystko.

**JamLasica** · 9 Października 2014

Przecież nawet nie ładujesz jquery.min.js u siebie na stronie, więc jak to by miało działać?

Zaloguj się

Poszukiwana modyfikacja

Rekomendowane odpowiedzi

RafoX

DawPi

JamLasica

RafoX

Macsch15

RafoX

Macsch15

DawPi

RafoX

DawPi

RafoX

RafoX

DawPi

JamLasica

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie