Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   чтение данных из URL и дальнейшее действие (https://javascript.ru/forum/events/31013-chtenie-dannykh-iz-url-i-dalnejjshee-dejjstvie.html)

Юсуф 23.08.2012 14:55

чтение данных из URL и дальнейшее действие
 
Добрый день! ребят 5 дней как уже мучаюсь, пытался решить проблему сам без помощи чисто для себя, но я походу полный нуб!!!

Проблема такая есть сылки
<div id="small"><a href="index.php#?page=1">ССЫЛКА 1</a></div>
<div id="small"><a href="index.php#?page=2">ССЫЛКА 2</a></div>
<div id="small"><a href="index.php#?page=3">ССЫЛКА 3</a></div>
<div id="small"><a href="index.php#?page=4">ССЫЛКА 4</a></div>
<div id="small"><a href="index.php#?page=5">ССЫЛКА 5</a></div>

при нажатии на ссылку должно выводить соответствующее фото, вот названия фоток (1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg)

вот сам скрипт обработки клик по ссылке

$(document).ready(function() {
  
$('#small a').click(function(eventObject)
    {
        var params = $(this).attr('href').split('index.php#?page=');
        alert ('Страница -'+ params[1]);  
      
           $('#big img').hide().attr('src',$(this).attr(params[1]));     
           $('#big img').load(function(){
           $(this).fadeIn(2000);
     });    

    
    });
        
 
});


вот сам контейнер big где должно выводиться фото !
<div id="big"><img src="foto.JPG" width="700" /></div>

при клике на ссылку в URLе выводиться #?page=1 или page=2 и т.д.
по идеи скрипт должен был обработать данные URL и вставить в контейнер big так? или не правильно ?

Deff 23.08.2012 15:13

<script type="text/javascript">
$(document).ready(function() {
  
$('#small a').click(function(eventObject)
    {
        var params = $(this).attr('href').split('index.php#?page=');
        alert ('Страница -'+ params[1]);  
      
           //$('#big img').hide(); //Расскомментите позже
           $('#big img').attr('src',params[1]+'.jpg');     
           $('#big img').load(function(){
              $(this).fadeIn(2000);
           });    

	return false;
    
    });
        

});

</script>


<div id="big"><img src="foto.JPG" width="700" /></div>

<div id="small"><a href="index.php#?page=1">ССЫЛКА 1</a></div>
<div id="small"><a href="index.php#?page=2">ССЫЛКА 2</a></div>
<div id="small"><a href="index.php#?page=3">ССЫЛКА 3</a></div>
<div id="small"><a href="index.php#?page=4">ССЫЛКА 4</a></div>
<div id="small"><a href="index.php#?page=5">ССЫЛКА 5</a></div>

Юсуф 23.08.2012 15:23

Спасибо огромное, понял свою ошибку!!!

Юсуф 23.08.2012 15:32

скажите а как я могу передать из php переменную в jquery, то есть так!

вот допусть переменая php указывающая полный путь вот:
$result = 'all/foto/otpusk/';


и эту переменню вставить вот сюда
$('#big img').attr('src','$result'+params[1]+'.jpg');

Маэстро 23.08.2012 15:53

Цитата:

Сообщение от Юсуф (Сообщение 199943)
скажите а как я могу передать из php переменную в jquery, то есть так!

вот допусть переменая php указывающая полный путь вот:
$result = 'all/foto/otpusk/';

и эту переменню вставить вот сюда
$('#big img').attr('src','$result'+params[1]+'.jpg');

var result = '<? echo $result ?>';
$('#big img').attr('src',result+params[1]+'.jpg');

Юсуф 23.08.2012 16:01

почему то он не воспроизводит фото этим методом

Маэстро 23.08.2012 16:07

Цитата:

Сообщение от Юсуф (Сообщение 199955)
почему то он не воспроизводит фото этим методом

Каким? ;)
Попробуйте сначала просто присвоить полный точный путь картинке:
$('#big img').attr('src','http://mysite.com/полный_точный_путь_к_картинке.jpg');

Юсуф 23.08.2012 17:00

все равно не выводить, я указал полный путь потом этот путь указал в переменной. не помогло

Deff 23.08.2012 17:13

Юсуф,
Выложите полные ссылки - мну вставит

Юсуф 23.08.2012 17:27

http://мой сайт.ru/all/foto/otpusk/1.jpg
то есть есть папка "all" в директории сайта. в ней папка "foto", а в ней папка "otpusk" в этой папке и хранятся фотки!

и этот путь у меня храниться в переменной php вот типа так

$result = '/all/foto/otpusk/';

Deff 23.08.2012 17:33

<script type="text/javascript">
$(document).ready(function() {
  
$('#small a').click(function(eventObject)
    {
        var params = $(this).attr('href').split('index.php#?page=');
      
           //$('#big img').hide(); //Расскомментите позже
           alert ('src='+ '../all/foto/otpusk/'+params[1]+'.jpg');  
           $('#big img').attr('src','../all/foto/otpusk/'+params[1]+'.jpg');     
           $('#big img').load(function(){
              $(this).fadeIn(2000);
           });    

	return false;
    
    });
        

});

</script>


<div id="big"><img src="foto.JPG" width="700" /></div>

<div id="small"><a href="index.php#?page=1">ССЫЛКА 1</a></div>
<div id="small"><a href="index.php#?page=2">ССЫЛКА 2</a></div>
<div id="small"><a href="index.php#?page=3">ССЫЛКА 3</a></div>
<div id="small"><a href="index.php#?page=4">ССЫЛКА 4</a></div>
<div id="small"><a href="index.php#?page=5">ССЫЛКА 5</a></div>


Расширение для фот jpg ? (или jpeg ?

Юсуф 23.08.2012 17:45

Deff, уважаемый это я понял, но у меня путь будет меняться, то есть в зависимости от выбора альбома и будет генерироваться путь при помощи php. Вот и мне и надо вставить значение из php. если можно было хотя бы сделать так:
допустим все мои альбомы хранятся в all/foto/ то есть в папке foto есть много папок с названиями альбомов, то в строке
$('#big img').attr('src',+params[1]+'.jpg'); прописать так
$('#big img').attr('src','../all/foto/'+albom+params[1]+'.jpg'); где переменой albom вписать назв. альбома из ссылки

<div id="small"><a href="index.php#название альбома?page=1">ССЫЛКА 1</a></div>

то есть наглядно будет выглядит вот так вот
<div id="small"><a href="index.php#otpusk?page=1">ССЫЛКА 1</a></div>

и если можно было бы из ссылки вытащить название альбома в переменную jquery

вы поняли о чем я? как мне из
index.php#otpusk?page=1 вытащить слово otpusk?

lord2kim 23.08.2012 17:57

Юсуф,
alert("index.php#otpusk?page=1".split("#")[1].split("?")[0]);

Deff 23.08.2012 17:58

Цитата:

Сообщение от Юсуф
если можно было бы из ссылки вытащить название альбома в переменную jquery

Нет проблем
<script type="text/javascript">
$(document).ready(function() {
  
$('#small a').click(function(eventObject)
    {

          var params = $(this).attr('href').replace(/^.*?#(.*)\?page=(\d+)/i,'$1/$2');
      
           //$('#big img').hide(); //Расскомментите позже
           alert ('src='+ '../all/foto/'+ params + '.jpg');  
           $('#big img').attr('src','../all/foto/'+ params + '.jpg');     
           $('#big img').load(function(){
              $(this).fadeIn(2000);
           });    

	return false;
    
    });
        

});

</script>


<div id="big"><img src="foto.JPG" width="700" /></div>

<div id="small"><a href="index.php#название альбома?page=1">ССЫЛКА 1</a></div>
<div id="small"><a href="index.php#название альбома?page=2">ССЫЛКА 2</a></div>
<div id="small"><a href="index.php#название альбома?page=3">ССЫЛКА 3</a></div>
<div id="small"><a href="index.php#название альбома?page=4">ССЫЛКА 4</a></div>
<div id="small"><a href="index.php#название альбома?page=5">ССЫЛКА 5</a></div>

Юсуф 24.08.2012 11:20

Мистер Deff вы гений!!!!!!!


Часовой пояс GMT +3, время: 04:09.